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