div與span的區(qū)別是什么

在html頁面布局時，我們經(jīng)常會使用到div標(biāo)簽和span標(biāo)簽，那么div標(biāo)簽和span標(biāo)簽之間有什么區(qū)別？本篇文章就給大家介紹div標(biāo)簽和span標(biāo)簽之間的區(qū)別，希望對你們有所幫助�！鞠嚓P(guān)視頻教程推薦：HTML教程】

HTML div標(biāo)簽

div標(biāo)簽是塊級元素，擁有塊級元素的特點。每對div標(biāo)簽（<div></div>）里的內(nèi)容都可以占據(jù)一行，不會其他標(biāo)簽在一行顯示；div標(biāo)簽總是從新行開始顯示；

且div標(biāo)簽可以通過css樣式來設(shè)置自身的寬度（也可省略，當(dāng)沒有使用css自定義寬度時，div標(biāo)簽的寬度為其的容器的100%）、高度，且還可以設(shè)置標(biāo)簽之間的距離（外邊距和內(nèi)邊距）；

我們還可以在div標(biāo)簽中，使用其他標(biāo)簽（行內(nèi)元素、塊級元素都行），比如：span標(biāo)簽，p標(biāo)簽，也可以是div標(biāo)簽。

div標(biāo)簽的簡單示例：設(shè)置這些div標(biāo)簽的容器的寬度為500px，高度為500px

<div class="div1">內(nèi)容1，使用div，不設(shè)置寬度，不設(shè)置邊距</div>
<div class="div2">內(nèi)容2，使用div，不設(shè)置寬度，設(shè)置內(nèi)邊距padding: 20px</div>
<div class="div3">內(nèi)容3，使用div，不設(shè)置寬度，設(shè)置外邊距margin: 20px</div>	
<div class="div4">內(nèi)容4，使用div，設(shè)置寬度，設(shè)置外邊距margin: 20px</div>		
<div class="div5">內(nèi)容5，使用div，設(shè)置寬度，設(shè)置內(nèi)邊距padding: 20px</div>			
<div class="div1">內(nèi)容6，使用div，不設(shè)置寬度，不設(shè)置邊距</div>

效果圖：

簡單示例2：在div標(biāo)簽了，添加其他html標(biāo)簽

<div>
	<span>span標(biāo)簽</span><span>span標(biāo)簽</span><a href="#">a標(biāo)簽</a><a href="#">a標(biāo)簽</a>
	<p>p標(biāo)簽</p>
	<div>div標(biāo)簽</div>
</div>

效果圖：

HTML span標(biāo)簽

span標(biāo)簽是行內(nèi)元素，擁有行內(nèi)元素的特點。span標(biāo)簽元素會和其他標(biāo)簽元素會在一行顯示（塊級元素除外），不會另起一行顯示（如上例）。

span標(biāo)簽的寬度、高度都無法通過css樣式設(shè)置，它的寬高受其本身內(nèi)容（文字、圖片）控制，隨著內(nèi)容的寬高改變而改變；span標(biāo)簽無法控制外邊距和內(nèi)邊距，雖然可以設(shè)置左右的外邊距和內(nèi)邊距，但上下的外邊距和內(nèi)邊距無法設(shè)置。

且，span標(biāo)簽里只能容納文本或者是其他的行內(nèi)元素，不能容納塊級元素。

span標(biāo)簽的簡單示例：

設(shè)置span.span1容器的內(nèi)邊距padding: 20px，span.span1容器內(nèi)的span標(biāo)簽的外邊距margin: 20px;

<span>span標(biāo)簽</span><span>span標(biāo)簽</span><a href="#">a標(biāo)簽</a><a href="#">a標(biāo)簽</a>
<div>div標(biāo)簽</div>
<span class="span1">span標(biāo)簽內(nèi)，添加<span>span標(biāo)簽</span><a href="#">a標(biāo)簽</a></span>

效果圖：

可以看出，雖然內(nèi)邊距padding把span.span1容器撐大了，但span標(biāo)簽的位置沒有向下移動。

總結(jié)：以上就是本篇文章的全部內(nèi)容，希望能對大家的學(xué)習(xí)有所幫助。

以上就是div和span的區(qū)別是什么的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！