CSS必知必會集錦（五）：頁面佈局

編者注：本集錦摘編自圖靈新書[《CSS設計師指南（第3版）》][1]第5章“頁面佈局”，是作者從相關主題中提煉出來的短小精悍的提示和法則。其中，既包含業界公認的CSS最佳實踐，又不乏作者獨到的一家之言，還有很多有價值的參考資料。理解這些CSS知識點，對夯實基礎，開闊視野是至關重要的。

據測試，font-family的值（字型名）不區分大小寫。但是，你可不能修改Google或其他線上字型庫生成的字型名，否則很可能無法使用它們提供的定製字型。

關於表現性標記的思考

HTML的目的是語義，也就是給內容賦予含義。而CSS呢，是為了把表現性的樣式分離出來才發明的。不過，有些表現性標記是有害的，而有些則沒有副作用。使用表格來建立多欄佈局，或者使用<br />標籤在段間換行，卻不使用<p>標籤的確不值得提倡。因為這種不當的做法會造成內容難以移植。比如說吧，用三個表格單元作為三欄，這種佈局到哪都會顯示成表格，就算是在完全不合適的智慧手機裡也一樣。如果表現性標記無法用CSS修改，或者在CSS不可用時也要迫使使用者接受，那就是濫用HTML。可是，div或span這種中性的元素，對預設樣式沒有影響，除非你給它們應用樣式，否則它們就跟不存在一樣。所以，我認為新增這種元素達到表現性的目的是完全可以接受的。

子-星選擇符

所謂“子-星選擇符”就是一個組合選擇符，利用它可以不使用內部div就可以設定一欄中所有元素的外邊距。

星號選擇符可以選擇“所有元素”。故而，在一個選擇符後面加個星號，比如someSelector *就可以選擇someSelector所代表元素的所有後代元素。子選擇符可以選擇“某元素的子元素”。故而，把子選擇符放到星號前面，比如someSelector > *就會只選擇someSelector所代表元素的所有子元素，而非後代元素。這正好適用於選擇容器內部的所有頂部元素，然後設定它們的外邊距。比如，對於section欄，設定section > * {margin:0 10px;}，就能為欄中所有子元素，不包括其他後代元素，各應用10畫素的左、右外邊距。 使用“子-星選擇符”要注意兩點。第一，在為子元素設定垂直外邊距時，只能使用margin-top和margin-bottom，不能使用簡寫的margin，否則會抵消用“子-星選擇符”應用給這些元素的水平外邊距。如果你想進一步縮排某個子元素的內容，應該給該子元素應用內邊距。

第二，“子-星選擇符”有潛在效能問題，因為它會導致瀏覽器遍歷整個DOM結構去查詢所有匹配的元素。但我也發現這一點效能影響幾乎可以忽略不計。假如你的頁面真的包含幾千上萬個元素，那倒確實該考慮用YSlow或其他效能度量工具測一測這個選擇符的影響。

最新版本的borderBoxModel.js膩子指令碼以及它的用途和侷限性，可以參考這裡：https://github.com/albertogasparin/borderBoxModel。另外，也可以讀一讀作者的這篇談box-sizing的文章：http://albertogasparin.it/articles/2012/02/start-using-css-box-sizing-today。

預防過大的元素

設計一個將來可能由他人維護的動態網站時，需要考慮得更長遠一些。比如，一些可能出現的過大的元素，就是應該提前預見的問題。如果將來有一張比浮動欄更寬的圖片被放到欄中，就會導致佈局變寬，而右邊的欄又會滑到下方。為此，一個簡單的預防措施就是新增一條.inner img {max-width:100%;}宣告，以便限制圖片的寬度不超過其父元素（在此就是內部div）。

另一個辦法是給每個欄（或者內部div，如果你用了的話）新增overflow:hidden宣告。這條宣告不會縮小圖片以適應父元素，而會將它（以及任何過大元素）超出容器邊界的部分剪下掉。

動態網站中另一個潛在的問題是換行。HTML只會在單詞間空格的地方換行。一些長URL，甚至一些長單詞，在欄比較窄的情況下，都會導致欄寬過大。因此，還應該給所有欄的外包裝元素應用word-wrap:break-word宣告，以便所有欄及其內容繼承這個設定。有了這條宣告，瀏覽器會把過長的詞斷開顯示在不同行上。只是word-wrap沒有定義在哪裡斷開，因此結果完全是隨機的，而且沒有連字元。不過，這條規則只在需要時才會起作用，而且能保護佈局不會被長URL頂得支離破碎。建議你在每一欄中都用長URL、大圖片，以及包含內容過多的元素測試一下佈局，看看這些宣告到底會不會起作用，並發現更多需要事先考慮保護措施的其他漏洞。

英文中經常用hook（這裡譯為“路標”，也有譯為“鉤子”的），表示程式碼中一個唯一的參照點，其他程式碼通過這個參照點可以與相應的程式碼互動。