您的位置:首页 > HTML入门 > 【 返回上一页

<div>与<span>的区别是什么?

div与span之<div>与<span>的区别是什么?

div css布局html中常常使用<div><span>标签,默认这个标签感觉没有什么区别,加了后字体文字大小字体颜色等样式都没有区别(可以说两者没有被加入默认渲染样式)。那div和span究竟什么区别呢?在实际html布局中怎么选择span和div?

一、<div>与<span>相同处:

1、两者都是HTML标签

<div>内容</div> 
<span>内容</span>

2、div与span内均可以使用class

<div class="names">内容</div> 
<span class="names">内容</span>

3、div与span内均可以使用id

<div id="names">内容</div> 
<span id="names">内容</span>

4、span与div内均可以使用style属性直接写CSS代码

<span style="font-size:20px">内容</span> 
<div style="color:#000">内容</div>

5、span和div标签均可嵌入标签

二、<span>与<div>区别

1、拼写单词不同
<span>标签,有四个字母(s p a n)组成

<div>标签,有三个字母(d i v)组成

2、<div>和<span>默认块样式区别
div默认具有块(独占一行)属性display:block,默认宽度100%

span默认不具有块(独占一行)属性,所以span默认内容多少自适应占用多少宽度高度。

div与span默认块样式区别实例截图
div与span默认块样式区别实例截图

3、div标签和span标签布局时选择不同
由于网页中布局网页时,有时布局框架,有时布局小局部,而div css常用是div标签,div自然作为主要布局标签,主要用于大布局框架,小布局框架时主要选择标签。而span作为小局部小样式地方选择。一般选择不使用span作为框架标签布局。

看看下面框架与小地方属性设置标签应用:

<div id="header"> 
<div class="nav">导航内容</div>
</div>

<div class="exp">
我是内容<span class="names">我有不同字体效果</span>
</div>

span与div区别选择示例

div和span区别使用示例截图
div和span区别使用示例截图

从上图,虽然div的应用没有设置CSS样式,只展示了html内容div标签使用,而span我们展示了小修饰时候选择span应用。通过以上实例代码要告诉大家都是,一般结构布局我们采用div标签,小小局部或小修饰地方我们采用span标签。

三、让div与span没有区别

这点作为延续思考问题,默认情况下div具有块,span不具有块功能,那么我们也可以让div和span具有相同块功能(独占一行),我们只需对span设置个display:block即可。

CSS代码

span{ display:block} 

html内容代码:

<div>我在div内</div> 
<div>我在div内</div>
<span>测试文字我在span内</span>
<span>测试文字我在span内</span>

div与span思维研究效果截图

span和div实现一样默认块属性示例截图
span和div实现一样默认块属性示例截图

四、<span>和<div>的区别与使用总结

通过以上ThinkCSS为大家介绍span与div相同,看出span与div都作为HTML标签,其大部分属性没什么区别,区别只有一个属性不同即块(display:block)有无。通俗理解,span默认紧贴内容随内容多少而自适应宽度高度,而div默认独占一行,默认情况下每个div盒子独占一行。

通常布局框架我们采用div比较多标签作为主要标签使用,而span作为小局部或小修饰地方使用。平时大家在实际做项目时候注意div与span选择,认识div与span区别。根据经验灵活选择span与div使用。

关于div与span相关教程扩展阅读:
1、div什么作用
2、div盒子
3、div换行显示
4、div隐藏 CSS隐藏DIV方法
5、div内容居中
6、html span作用
7、css span应用 span标签css设置
8、多个div盒子并排同行显示
9、div并排不换行显示 DIV并排显示

相关标签: div span
如需转载,请注明文章出处和来源网址:http://www.thinkcss.com/html/1051.shtml

日期:2016-08-21 09:44 未知 ThinkCSS

热门点击