CSS必知必會集錦（三）：定位元素

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

要了解有關盒模型的更多資訊，請參考這裡：http://www.w3.org/TR/REC-CSS2/box.html。

CSS推薦標準並未明確規定border-width這幾個文字值thin、medium和thick的確切寬度，實際顯示的寬度可能會因瀏覽器而異。對於邊框樣式（border-style），除了solid值（實線）之外，CSS規範也沒有明確規定。因此dashed值（虛線）在不同瀏覽器中的短劃線長度和線間距也可能會不一樣。

中和外邊距和內邊距

推薦大家把下面這條規則作為樣式表的第一條規則：

* {margin:0; padding:0;}

這條規則把所有元素預設的外邊距和內邊距都設定為零。把這條規則放到樣式表裡後，所有預設的外邊距和內邊距都會消失。然後，你可以為那些真正需要外邊距的元素再新增外邊距。稍後我們會介紹，不同瀏覽器預設的內邊距和外邊距也不一樣，特別是對錶單和列表等複合元素。在這種情況下，用前面那條規則“中和”預設值，然後再根據需要新增，則會得到跨瀏覽器一致的效果。

我在自己的專案中使用了Eric Meyer寫的重置樣式表reset.css。這個樣式表不僅重置了外邊距和內邊距，還對很多元素在跨瀏覽器顯示時的外觀進行了標準化。 至於Eric為什麼要寫一個涉及面如此之廣的重置樣式表，可以參考他的文章http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning，reset.css的下載地址是http://meyerweb.com/eric/tools/css/reset。

注意啦，疊加的只是垂直外邊距，水平外邊距不疊加。對於水平相鄰的元素，它們的水平間距是相鄰外邊距之和。這跟你最初想的一樣。

隨著HTML5時代的到來，以及舊版瀏覽器退出歷史舞臺，用於確保站點在嚴格模式（使用W3C標準的盒模型）或混雜模式（適應IE6及更早版本的盒模型）下呈現的XHTML文件宣告也就不再需要了。要了解什麼是混雜模式，請參考這篇文章：http://www.quirksmode.org/css/quirksmode.html。

CSS3新增了一個box-sizing屬性，通過它可以將有寬度的盒子也設定成具有預設的auto狀態下的行為。但只有最新版本的瀏覽器才支援該屬性，所以在本書寫作時（2012年夏天），我還不能推薦你使用它。

影響浮動的因素還有很多，推薦讀者看一看Eric Meyer的那本Cascading Style Sheets 2.0 Programmer's Reference（2006，McGraw-Hill Osborne Media）。這裡摘錄Eric在那本書裡寫的一句話：“當你浮動一個元素的時候……這些（浮動）規則就好像在說：‘儘量把這個元素往上放，能放多高放多高，直到碰到某個元素的邊界為止。’”即使這本書的出版年份是2006年，但它仍然是任何CSS高手必備的一本參考書。這本書涵蓋了CSS執行機制的方方面面，其中很多在別的書裡是找不到的。

CSS3 Multi-column Layout Module規定了如何用CSS定義多欄佈局。但在本書寫作時，只有Opera和IE10支援相應屬性。因此在可以預見的未來，float屬性仍然是建立多欄佈局的最佳途徑。

浮動非圖片元素時，必須給它設定寬度，否則後果難以預料。圖片無所謂，因為它本身有預設的寬度。

實際上，overflow:hidden宣告的真正用途是防止包含元素被超大內容撐大。應用overflow:hidden之後，包含元素依然保持其設定的寬度，而超大的子內容則會被容器剪下掉。除此之外，overflow:hidden還有另一個作用，即它能可靠地迫使父元素包含其浮動的子元素。

這個clearfix規則最早是由程式設計師Tony Aslett發明的，它只新增了一個清除的包含句點作為非浮動元素（必須得有內容，而句點是最小的內容）¹。規則中的其他宣告是為了確保這個偽元素沒有高度，而且在頁面上不可見。

^{1 :after會在元素內容——而不是元素後面插入一個偽元素。——譯者注}

使用clear:both意味著section中新增的子元素會清除左、右浮動元素（位於左、右浮動元素下方）。這裡當然可以只用left，但both也適用於將來圖片float:right的情況。

可以給top和left屬性設定負值，把元素向上、向左移動。

請注意，對HTML中的文字應該使用恰當的語義標籤來標記。我們這裡為了說明問題的需要，才把文字直接放在了沒有語義的div中。

事實上，只要把元素的外邊距和內邊距設定好，多數情況下只用靜態定位就足以實現頁面佈局了。很多剛開始接觸CSS的初學者都會錯誤地設定position屬性，最終才發現從文件流中挪出來的這些元素一點也不好控制。因此，除非真需要那麼做，否則不要輕易修改元素預設的position屬性。

只給background-position設定一個關鍵字值，則另一個也會取相同的值（比如這裡就相當於寫了background-position:center cetner）。

我聽見有人小聲嘀咕：“為什麼文字也跟著垂直居中了呢？”哈哈，這是因為我把line-height設定成了元素的高度，而行高是在文字行上下平均分配的。此外，我還把text-align設定為center，把文字水平居中。這樣就讓文字跟背景圖片一樣，在兩個方向上都居中了。

Modernizr是一個JavaScript庫，用於檢測使用者瀏覽器支援哪些HTML5和CSS3功能。更多資訊，請參考這個網址：http://modernizr.com。

有關CSS3中新背景屬性的更多資訊，請參考：http://www.w3.org/TR/css3-background。

漸變是CSS幫我們生成的背景圖片。新增漸變可以使用background-image屬性，也可以像後面例子中一樣使用快捷background屬性。