XHTML+CSS能夠?qū)崿F(xiàn)的是一種流布局，也就是隨著內(nèi)容的長度自動增長區(qū)域，并且最終導致整個頁面增長，這時候瀏覽器就必須顯示滾動條。table強迫癥的一個征兆就是極力避免流布局，希望以瀏覽器的可視區(qū)域為布局目標，要求在可視區(qū)域中劃分內(nèi)容區(qū)域而不是在頁面上劃分內(nèi)容區(qū)域。本文就講解了使用XHTML+CSS布局頁面的原因。

在CSDN社區(qū)上，時不時能夠看到一些頁面整體布局的問題，要求用div做一些table才能做到的，否則就以此為把柄說XHTML+CSS布局方法不好。其實，首先要做的是改變思維，以適應(yīng)XHTML+CSS的布局。

面向頁面設(shè)計而非面向瀏覽器設(shè)計

XHTML+CSS能夠?qū)崿F(xiàn)的是一種流布局，也就是隨著內(nèi)容的長度自動增長區(qū)域，并且最終導致整個頁面增長，這時候瀏覽器就必須顯示滾動條。table強迫癥的一個征兆就是極力避免流布局，希望以瀏覽器的可視區(qū)域為布局目標，要求在可視區(qū)域中劃分內(nèi)容區(qū)域而不是在頁面上劃分內(nèi)容區(qū)域。實際上XHTML是無法針對瀏覽器設(shè)計的，因為它僅僅包含語義，或者說是內(nèi)容，而瀏覽器如何去表現(xiàn)這些內(nèi)容是我們無法確定的。CSS提供了我們控制表現(xiàn)方式的一種途徑，但這僅僅是針對主流瀏覽器的，而且瀏覽器支持的“指令集”還有稍為的差別（說到這，我真希望能夠為一個瀏覽器寫CSS然后編譯為全平臺兼容代碼），最后這些指令暫時還僅僅支持針對頁面的流式布局控制。因此，如果你決定要開始寫符合語義的XHTML并且僅僅用CSS控制布局，首先就要把思路轉(zhuǎn)變?yōu)槊嫦蝽撁妫ɑ蛘哒f是文檔）的布局控制，而非面向瀏覽器可視區(qū)域的布局控制。

接下來肯定有人要說，“那你就是承認了有些布局老方法很容易做到，但新方法很難做到啦”。這是當然的，然而這不成為我們繼續(xù)使用table的理由。這時候要反過來探討原始目標了，我們是為什么要控制布局？低層次的需求是為了美觀，誰都希望同樣的內(nèi)容能夠以更好的視覺效果展示在用戶眼前；高層次的需求是為了控制受眾的瀏覽方式，讓他們能夠按我們預先設(shè)計好的方式來區(qū)分頁面內(nèi)容的輕重點，按我們的期望優(yōu)先瀏覽某些內(nèi)容，同時也幫助他們更快的找到他們想要的內(nèi)容，而不會在我們的網(wǎng)站內(nèi)感到沮喪。既然我們確定了這時控制布局的目標，那么我們再來看看CSS是不是“沒辦法把事情做好”。首先，CSS也能做出美觀的頁面，雖然某些布局做不到，但是在CSS的限制下做到同等美觀程度的頁面是肯定沒問題的。其次，CSS也能讓設(shè)計變得友善，不會說CSS的設(shè)計就肯定是“干凈”到用戶無法一眼找到他想要的功能。因此，雖然CSS無法實現(xiàn)某些特定的布局效果，但對于設(shè)計師來說它能夠達到老方法所能達到的同等效果，這就足夠了。

從XHTML中去掉內(nèi)容無關(guān)的視覺元素

另一個table強迫癥的征兆就是，習慣為每一個視覺上的元素對應(yīng)一個XHTML元素。在table中，無論視覺效果有多復雜，我們總能不停的切割table，甚至table套table，直到準確定位每一個特定的元素。然而應(yīng)用了CSS之后，這就是不必要的，甚至會給設(shè)計師帶來麻煩，因為XHTML+CSS就是為了內(nèi)容和布局分離，所以如果一個視覺元素與內(nèi)容無關(guān)，那么它就不應(yīng)當出現(xiàn)在XHTML中，自然也就不會對應(yīng)一個XHTML元素。

例如有一個網(wǎng)站當前欄目的徽標，這個徽標沒有任何的語義，而XHTML中也有文字內(nèi)容描述當前欄目了，那么這個徽標就并不一定要對應(yīng)一個<img />元素。如何讓徽標顯示出來呢？它可以是當前欄目文字描述區(qū)域的background-image，同時通過一些定位技巧讓它顯示出來。如果你認為有這個徽標就不需要文字描述時，你還可以通過定位技巧將文字隱藏掉，這樣單純看XHTML或者在不支持CSS的瀏覽器上就只見文字描述，而在支持CSS的瀏覽器中則看見會標。從這個例子，我們可以看得到一個視覺元素不一定要對應(yīng)XHTML中一個實實在在的內(nèi)容元素，或者對應(yīng)一個文本元素而非圖形元素。XHTML包含的是內(nèi)容，那就不應(yīng)該包含與內(nèi)容無關(guān)的視覺元素描述，而通過CSS你可以事后增加有關(guān)的視覺元素。

又例如:before和:after這兩個偽選擇器，允許你創(chuàng)建插入在匹配元素前后的元素，這樣就能夠?qū)崿F(xiàn)非內(nèi)容視覺效果僅在CSS中插入。常見的用法包括，插入clear到浮動元素之后以確保父元素的完整包含，又或者是引用語句的前后自動加上引號。事實表明，CSS是很適合于將非內(nèi)容的元素從XHTML中分離出來的，因此我們在設(shè)計XHTML時就不能夠總想著要有什么效果，而應(yīng)該單純想著信息的組織形式。

最后，如果要我為table強迫癥開處方的話，我還是會選擇《CSS Mastery/精通CSS》。看完之后，你自然能夠解除上述的煩惱，理解到CSS布局帶來的便利，從而選擇開始用純CSS的思維來進行設(shè)計。