根本不存在 DIV + CSS 布局這回事

文章目錄

• img
• a
• ul, ol
• dl
• form, input
• table
• div, span

在《欲練 CSS ，必先宮 IE》和《你有 <table /> 強迫症嗎？》這兩篇文章中，看到有不少評論用到div+CSS布局這個說法，用來和table布局比較。實際上div不是用來布局的，div只是用來表示一個其它元素都無法準確表達語意的一個塊區，只有CSS是用於布局的，所以根本就不存在div+CSS布局這回事。反過來，table布局的時候經常依賴於CSS定義一個儲存格的布局屬性，所以可以說是table+CSS布局。也就是說，我們討論的兩種主流布局方法應該是純CSS布局和table+CSS布局，如果你覺得你在用的是div+CSS布局，那麼有可能你也有強迫症了。

接下來我們說說如何進行純CSS布局，因為CSS布局依賴於XHTML，所以我們先要說說如何書寫一個CSS無關的XHTML。其實書寫CSS無關的XHTML並不難，雖然你不能再好像書寫table布局代碼那樣集中精力於最重的視覺效果上，但其難度也不過是中學生寫作文那樣。

中學生寫作文如何寫呢？首先看看題目，然後想想整篇文章分為哪幾個大的段落，每個大的段落說些什麼，能夠把你要說的東西說清楚。對於XHTML來說，這相當於用div把文檔切割為幾大塊。這時候你不要想著這些div將構建一個怎樣的DOM啊、CSS如何選擇DOM中元素設定規則實現布局之類的事情，就大概劃分一下文檔的大地區就好了。

然後當然是用一些常用的手法來表現感情或者論證問題，這在XHTML中就是用特定的元素來完成一些常見的資訊組織。下面就是資訊組織形式與元素的對應列表。

img

作為內容的圖片是一定要放到img裡面的，這沒有更好的選擇了。然而如果圖片不是作為內容，而是作為修飾性的，則千萬不要用img。對於非內容的圖片，應該在CSS中引用，而不在XHTML中出現。例如每一個導航連結有一個前置的箭頭指示，那麼這些箭頭就應該通過CSS的background-image屬性加上去，而不是直接作為img出現。

a

這也是一個非常準確定義的元素，連結都需要使用它。或許已經有很多人忘記了a的本意是錨點，其實這是一個十分有用的語義，你可以用它來標記文檔中一些重要的引用位置。

ul, ol

ul和ol分別是什麼意思呢？如果你回答不上來，卻知道它們可以用來幹什麼，那證明你是被視覺化檢視寵壞了，要轉換過來編寫符合語義的XHTML需要先補充基礎知識，這時候你最好先找一些看起來非常基礎非常全面的XHTML書籍看看，因為沒有紮實的基礎你在上面構建更多的知識都是不牢固的。ul和ol其實分別代表unordered list和ordered list，也就是無序列表和有序列表。在語義上，它們都用於表示一類並列關係的內容，例如我們去商店購物之前列一張shopping list，上面要買的東西就是並列關係，在中文可以用頓號隔開那種。它們的差別在於是否有順序，例如shopping list是沒順序的，先買什麼後買什麼是沒關係的，但是一份旅遊行程安排上面的景點列表卻是有遊覽的先後順序的。

ul常用於導覽列，因為導航元素符合上面所說的並列關係，樹狀導航結構還可以通過嵌套ul來表述。在這裡，導航可以是我們常見的水平或豎直導覽列，甚至可以是地圖導航，例如在中國地圖上不同的省份熱區其實是不同的li。如果我說，在主流瀏覽器上使用者看到了中國地圖和可以直接點擊省份熱區，在不支援CSS的瀏覽器上使用者能看到一份純文字的省份名稱列表，使用的是同一份XHTML，而這完全通過CSS實現，甚至不依賴於JavaScript，你相信嗎？

另外，如果你要顯示一個圖庫的縮圖，這些圖片也可以放在ul中哦，因為這些圖片也是並列關係。它們可以自動先橫排，排滿一行就自動排第二行，CSS可以讓他們乖乖排隊，而不需好像table那樣把圖片定死在一個格子裡。其實table用於布局就如同用監獄關押內容一樣，把內容鎖死在一個格子裡不讓它到處亂跑；符合語義的XHTML就如同一個開放的舞台，你只要懂得利用CSS的規則，內容就自然會找一個適合表現自己的地方站著。

dl

沒有聽說過dl嗎？因為那些視覺化檢視產生的程式碼中從來不會出現dl？dl的意思是definition list，也就是定義列表。它包含的子項目不是li，而是dt和dd，也就是definition term和definition description。dl本身設計為字典單詞與解釋列表這樣的語義，例如：
<dl>
  <dt>Apple</dt>
  <dd>蘋果</dd>
  <dt>Boy</dt>
  <dd>男孩</dd>
</dl>

然而，如果你需要表示的的語義也是類似的，一個列表既包含定義也包含解釋，那麼也可以考慮用dl。

form, input

form也就是表單啦，這沒什麼好說的，就算再不顧及語義的人在書寫XHTML時也會考慮到它與各種input對提交資料的影響，從而小心謹慎。

table

table自然是用來表示表格的，這不廢話！如果是資料表，當然可以用table來表示，但如果不是，就最好別用table了。

人名列表呢？例如一個3行4列的人名列表。如果這12個人名是並列關係，我建議你用ul和12個li來表示，再通過CSS來讓它們在一行內並列顯示多個。名片表呢？也就是3行8列，每兩列中左側一列顯示人名右側一列顯示電話地址等連絡方式。我覺得dl在一定程度上能滿足此需求，dt放人名，dd放連絡方式，不過這時候就涉及了dl濫用的爭論，因為人名與連絡方式當作定義與解釋有點牽強。

接下來還有一個關於你是否系統學習過XHTML的小提問，那就是你是否知道table下面的caption、col、colgroup、thead、tbody、tfoot元素及summary屬性分別用於定義什麼，還有就是你書寫table時是否會使用thead、tbody。

div, span

再次審閱上面的列表，如果你需要表示一個塊區卻無法在上面找到更適合的元素，那麼你就可以考慮使用div和span這兩個最沒有語義的元素了。div與span的區別，曆史上的不說了，現在通常大塊的地區用div，行內的小文本片段就用span。在上面我已經說了div一般用於全域劃分為幾個大的地區，所以一般不需要使用了。span其實也很少使用，因為行內的強調通常可以用語義更強的元素例如strong和em。

在理解上上述那麼多常用元素後，寫一個XHTML就真的如同中學生寫作文一樣容易啦，還是搭積木那樣，其實和以前使用可使化工具搭積木沒什麼不同，唯一不同是現在你理解了你在搭的是什麼，而以前你只在乎搭出你想要的視覺效果來。寫代碼與寫作文所類似的地方，就在於你寫得越多就越熟練，也就越能寫出好東西來。在寫好XHTML後我們就要開始考慮如何寫CSS了，或許還需要在XHTML中略作修改以方便CSS中規則的選擇與匹配，不過這是以後再說的內容了，今天就說到這裡。

最後，如果你有興趣閱讀我以後發表的有關CSS的文章，可以考慮訂閱我的blog：

• Cat in Chinese (feed: http://feeds.feedburner.com/CatChen/Chinese)
• Cat in dotNET (feed: http://feeds.feedburner.com/CatChen/dotNET)