專(zhuān)注Java教育14年
全國(guó)咨詢(xún)/投訴熱線(xiàn)：400-8080-105
更新時(shí)間：2021-03-26 17:30:32 來(lái)源：動(dòng)力節(jié)點(diǎn) 瀏覽1138次
我們?cè)诔鯇W(xué)div+css布局時(shí)，發(fā)現(xiàn)在div與span的使用過(guò)程沒(méi)有什么太大的講究，覺(jué)得兩個(gè)區(qū)別不大，div作為分割文檔結(jié)構(gòu)自然使它最官方的語(yǔ)義，但是這樣的官方語(yǔ)義太讓人迷惑，大的結(jié)構(gòu)還好，但是小的地方到底是用div還是用span仍然讓人迷惑。本文我們就來(lái)談?wù)凥TML中div于span的區(qū)別。
也許我們重新來(lái)看div和span的定義能讓人豁然開(kāi)朗。
div：指定渲染HTML的容器
span：指定內(nèi)嵌文本容器
通俗地講就是如果里面還有其他標(biāo)簽的時(shí)候就用div，如果里面只有文本就應(yīng)該用span。
div是一個(gè)塊級(jí)元素，用來(lái)為HTML文檔內(nèi)大塊的內(nèi)容提供結(jié)構(gòu)和背景；而span是行內(nèi)元素，在行內(nèi)定義一個(gè)區(qū)域（也就是一行內(nèi)可以被<span>劃分好幾個(gè)區(qū)域）；
div標(biāo)簽中可以鑲嵌span標(biāo)簽，（div可以看做是一個(gè)大容器，span是一個(gè)小容器，大容器當(dāng)然可以放下一個(gè)小容器啦）。
1.所謂塊元素，是以另起一行開(kāi)始渲染的元素，行內(nèi)元素則不需另起一行，測(cè)試一下下面的代碼你會(huì)有更形象的理解：
測(cè)試<span>緊跟前面的"測(cè)試"顯示</span><div>這里會(huì)另起一行顯示</div>
2.塊元素和行內(nèi)元素也不是一成不變的，通過(guò)定義CSS的display屬性值可以互相轉(zhuǎn)化，如：
測(cè)試<div style="display:inline">緊跟前面的"測(cè)試"顯示</div><span style="display:block">這里會(huì)另起一行顯示</span>
html4規(guī)范的一大突破就是引入了一大空元素<span>和<div>。所謂空元素，就是說(shuō)如果單獨(dú)在頁(yè)面上插入這兩個(gè)元素，不會(huì)對(duì)頁(yè)面產(chǎn)生影響，但是這兩個(gè)屬性專(zhuān)門(mén)為樣式表定義而生，如果對(duì)<span>和<div>定義樣式表以后，其中內(nèi)容的樣式舊會(huì)隨之變化。
<span>和<div>元素都能處理任意大小的片斷，他們之間的異同可以用一個(gè)例子來(lái)說(shuō)明。
示例如下
<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è)計(jì)者在代碼中輸入了4個(gè)單詞，單詞之間沒(méi)有換行，也沒(méi)有空格。然后為每一個(gè)單詞嵌套上<span></span>和<div></div>元素，兩種元素產(chǎn)生了不同的顯示效果。
<span>元素包含的內(nèi)容，在顯示格式上沒(méi)有任何變化，沒(méi)有因?yàn)椴迦?lt;span>元素而產(chǎn)生換行或者其他排版效果。這樣的顯示效果稱(chēng)為“行內(nèi)元素”，設(shè)計(jì)者可以在一段文本中插入任意多對(duì)<span>元素，然后添加字體、顏色、背景、邊框和邊距等各種格式。
<div>元素所包含的內(nèi)容，在格式上有所變化，每一個(gè)<div>元素所包含的內(nèi)容都另起一行，瀏覽器為他們分配了一個(gè)獨(dú)立區(qū)域，形成一個(gè)一個(gè)“塊”，因此<div>也被稱(chēng)作“塊級(jí)元素”。不過(guò)除了這個(gè)區(qū)別，在其他方面<span>和<div>基本相同，它們都可以為其中內(nèi)容添加各種樣式。
正是有了<span>和<div>兩個(gè)元素的出現(xiàn)，使得HTML4的樣式定義變得更為靈活和規(guī)范。
利用<span>，可以在任意位置對(duì)特定字符進(jìn)行樣式格式化，即使字符包含在<li>中也一樣。這些功能都是僅靠HTML元素本身屬性無(wú)法達(dá)到的，而行內(nèi)樣式元素<span>可以達(dá)到這樣的效果。
如果將這些類(lèi)編組防入一個(gè)腳本中，就可以在頁(yè)面上模擬動(dòng)態(tài)計(jì)數(shù)效果。它的優(yōu)點(diǎn)非常明顯，設(shè)計(jì)者在變化數(shù)字的時(shí)候，無(wú)需修改<body>中的具體內(nèi)容，只要用樣式表歸類(lèi)不同背景色的<div>塊即可。所以說(shuō)，在HTML中，div和span都扮演著十分重要的角色。本站的HTML教程中，還有對(duì)其他的HTML標(biāo)簽的講解，想學(xué)習(xí)的小伙伴抓緊時(shí)間行動(dòng)起來(lái)吧。
Java實(shí)驗(yàn)班
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
Java就業(yè)班
有基礎(chǔ) 直達(dá)就業(yè)
Java夜校直播班
業(yè)余時(shí)間 高薪轉(zhuǎn)行
Java在職加薪班
工作1~3年，加薪神器
Java架構(gòu)師班
工作3~5年，晉升架構(gòu)
提交申請(qǐng)后，顧問(wèn)老師會(huì)電話(huà)與您溝通安排學(xué)習(xí)
京公網(wǎng)安備 11030102010736號(hào)