div vs span

對於CSS佈局而言，除了對id  與class選擇符的使用中會存在一定的問題外，就是span.

span與div從語義上無法理解其真正用途，而在使用上span及div幾乎所有相同的屬性.

如下代碼所示

<div id="d1">div1</div>

<div id="d2">div2</div>

<br />

<span id="s1">span1</span>

<span id="s2">span2</span>

 

CSS代碼：

       #d1,#d2,#s1,#s2{

              border:1px solid #000FFF;

              padding:10px;      

       }

顯示效果如下

從上面效果可以看到，兩個div之間出現了換行，而span是並行。

對於XHTML的每一個對象而言，都擁有自己默認的顯示模式，div對象的默認顯示模式display:block; 而span是display:inline;

在實際使用中 div對象的任務是呈現一個塊狀內容，如一大段文本，一個導航區域，一個頁腳區域等顯示塊狀的內容進行結構編碼並進行樣式設計。

而作爲內聯對象的span,用途是對行內元素進行結構編碼 以方便 樣式設計。span默認狀態下就不會破壞行中元素的顯示順序，例如在一大段文本中，需要改變其中一段文本的顏色，可以使用span並進行樣式設計，這將不會改邊這一整段文本的顯示方式。

div與span對象有着自己各自的用途與使用方法，雖然可以通過display屬性的更改對它們的顯示方式進行變化。但並不以爲着二者的互換能夠對頁面帶來好處，要根據實際場合使用對象來頁面設計任務。