專注Java教育14年
全國咨詢/投訴熱線：400-8080-105
更新時間：2021-03-26 17:30:32 來源：動力節(jié)點 瀏覽1305次
我們在初學(xué)div+css布局時，發(fā)現(xiàn)在div與span的使用過程沒有什么太大的講究，覺得兩個區(qū)別不大，div作為分割文檔結(jié)構(gòu)自然使它最官方的語義，但是這樣的官方語義太讓人迷惑，大的結(jié)構(gòu)還好，但是小的地方到底是用div還是用span仍然讓人迷惑。本文我們就來談?wù)凥TML中div于span的區(qū)別。
也許我們重新來看div和span的定義能讓人豁然開朗。
div：指定渲染HTML的容器
span：指定內(nèi)嵌文本容器
通俗地講就是如果里面還有其他標(biāo)簽的時候就用div，如果里面只有文本就應(yīng)該用span。
div是一個塊級元素，用來為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景；而span是行內(nèi)元素，在行內(nèi)定義一個區(qū)域（也就是一行內(nèi)可以被<span>劃分好幾個區(qū)域）；
div標(biāo)簽中可以鑲嵌span標(biāo)簽，（div可以看做是一個大容器，span是一個小容器，大容器當(dāng)然可以放下一個小容器啦）。
1.所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行，測試一下下面的代碼你會有更形象的理解：
測試<span>緊跟前面的"測試"顯示</span><div>這里會另起一行顯示</div>
2.塊元素和行內(nèi)元素也不是一成不變的，通過定義CSS的display屬性值可以互相轉(zhuǎn)化，如：
測試<div style="display:inline">緊跟前面的"測試"顯示</div><span style="display:block">這里會另起一行顯示</span>
html4規(guī)范的一大突破就是引入了一大空元素<span>和<div>。所謂空元素，就是說如果單獨在頁面上插入這兩個元素，不會對頁面產(chǎn)生影響，但是這兩個屬性專門為樣式表定義而生，如果對<span>和<div>定義樣式表以后，其中內(nèi)容的樣式舊會隨之變化。
<span>和<div>元素都能處理任意大小的片斷，他們之間的異同可以用一個例子來說明。
示例如下
<html>
<head>
<meta http-equiv="Content-Style-Type"content="text/css">
<title>HTML示例</title>
<style type="text/css">
.myspan1{color:#FFFFFF;}
.myspan2{color:#000000;background-color:#CCFFCC;}
.myspan3{color:#FFFFFF;background-color:#000080;}
.myspan4{color:#000000;background-color:#FFCCCC;}
.mydiv1{color:#FFFFFF;background-color:#008000;}
.mydiv2{color:#000000;background-color:#CCCCFF;}
.mydiv3{color:#FFFFFF;background-color:#000000;}
.mydiv4{color:#000000;background-color:#FFFFAA;}
</style>
</head>
<body>
<h2>生命必須元素</h2>
<span class="myspan1">水</span>
<span class="myspan2">維生素</span>
<span class="myspan3">蛋白質(zhì)</span>
<span class="myspan4">礦物質(zhì)</span>
<hr>
<div class="mydiv1">水</div>
<div class="mydiv2">維生素</div>
<div class="mydiv3">蛋白質(zhì)</div>
<div class="mydiv4">礦物質(zhì)</div>
</body>
</html>
設(shè)計者在代碼中輸入了4個單詞，單詞之間沒有換行，也沒有空格。然后為每一個單詞嵌套上<span></span>和<div></div>元素，兩種元素產(chǎn)生了不同的顯示效果。
<span>元素包含的內(nèi)容，在顯示格式上沒有任何變化，沒有因為插入<span>元素而產(chǎn)生換行或者其他排版效果。這樣的顯示效果稱為“行內(nèi)元素”，設(shè)計者可以在一段文本中插入任意多對<span>元素，然后添加字體、顏色、背景、邊框和邊距等各種格式。
<div>元素所包含的內(nèi)容，在格式上有所變化，每一個<div>元素所包含的內(nèi)容都另起一行，瀏覽器為他們分配了一個獨立區(qū)域，形成一個一個“塊”，因此<div>也被稱作“塊級元素”。不過除了這個區(qū)別，在其他方面<span>和<div>基本相同，它們都可以為其中內(nèi)容添加各種樣式。
正是有了<span>和<div>兩個元素的出現(xiàn)，使得HTML4的樣式定義變得更為靈活和規(guī)范。
利用<span>，可以在任意位置對特定字符進(jìn)行樣式格式化，即使字符包含在<li>中也一樣。這些功能都是僅靠HTML元素本身屬性無法達(dá)到的，而行內(nèi)樣式元素<span>可以達(dá)到這樣的效果。
如果將這些類編組防入一個腳本中，就可以在頁面上模擬動態(tài)計數(shù)效果。它的優(yōu)點非常明顯，設(shè)計者在變化數(shù)字的時候，無需修改<body>中的具體內(nèi)容，只要用樣式表歸類不同背景色的<div>塊即可。所以說，在HTML中，div和span都扮演著十分重要的角色。本站的HTML教程中，還有對其他的HTML標(biāo)簽的講解，想學(xué)習(xí)的小伙伴抓緊時間行動起來吧。
官方微信
官方抖音
Java實驗班
Java就業(yè)班
Java夜校直播班
Java在職加薪班
Java架構(gòu)師班
京公網(wǎng)安備 11030102010736號