博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DIV和SPAN的区别
阅读量:6256 次
发布时间:2019-06-22

本文共 589 字,大约阅读时间需要 1 分钟。

转自:http://www.divcss5.com/rumen/r79.shtml

DIV与SPAN的区别

DIV 块元素,span是行内元素

Span的宽度依照包围着对象的宽度而定,所以不能用宽度属性width设置span标记内对象的宽度,但可以设置span的margin(外补丁)值,span中的对象位置与父对象的距离

l  Div  块元素        100%         会换行

l  Span 行内元素  文本实际长度

l  块元素和行内元素也不是一成不变的,通过定义CSS的display属性值可以互相转化

Eg:#div{display:inherit;}   #span{display:block;}

何时用span

在同一行中,想对其中文字或图片设置样式,而又不要该行文本换行的条件下,使用span标记

 

 

 

以下是在没有对开发网页页面设置时候情况下,系统默认情况下的介绍

div与span区别
div占用的位置是一行,
span占用的是内容有多宽就占用多宽的空间距离,说明如下图

sapn标签使用案例截图

分析:从上图很容易知道“我是内容一;用的div”和“我是内容二;用的div”两个内容外部用的是<div>标签,他们得到样式是占用了一排空间(相当于换行一样);而“我是内容三;用的span”和“我是内容四;用的span”则,文字内容有多宽,就占用多宽距离,使用<span>标签和不使用一样效果。

转载地址:http://rznsa.baihongyu.com/

你可能感兴趣的文章
const与基本数据类型
查看>>
使用automator上传图片到腾讯云
查看>>
JavaScript函数式编程入门-计算器应用
查看>>
教你开发省电的 iOS app(WWDC17 观后)
查看>>
vue 地图可视化 maptalks 篇
查看>>
从一道春招笔试题说起 [上]
查看>>
为什么要评审代码?
查看>>
[肥朝]一比一手写Dubbo源码中的SPI,内附git地址
查看>>
Java并行执行任务的几种方案
查看>>
执行上下文、变量对象、作用域链、this,看这篇就够了!
查看>>
微服务分布式b2b b2c o2o电子商务云平台
查看>>
算法(2)KMP算法
查看>>
TCP/IP五层协议
查看>>
单例模式 写法
查看>>
关于ComponentScan
查看>>
JavaScript-算法-数组去除重复的元素
查看>>
领域驱动设计,构建简单的新闻系统,20分钟够吗?
查看>>
Netty实战之使用Netty解析交通部JT808协议
查看>>
手拉手教你实现一门编程语言 Enkel, 系列 9
查看>>
HTML 基础
查看>>