div与span的区别是什么?

2019-09-07 郑州网站建设  

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便可。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/973.html转载请标明出处,谢谢合作!
标签:
  • DIV
  • span
  • 区别
  • 是什么