<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默许块花样判别实例截图

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的应用没有设置装备摆设CSS款式,只显示了html模式div标签使用,而span我们展现了小润饰时刻抉择span应用。通过以上实例代码要秘要大家但凡,一样平常结构机关我们采用div标签,小小一部分或小润饰地方咱们采纳span标签。

三、让div与span没有鉴识

这点作为一连思虑题目,默许情况下div具备块,span不具备块坚守,那末我们也可让div与span具有相似块死守(独占一行),咱们只需对span设置个display:block便可。