給設計師們的代碼指南之定位與布局

 　　之前說了什麼是 CSS ，也介紹了 CSS 的盒模型，下面理所當然地要進入 CSS 的核心內容，定位與布局。其實說完這個部分，CSS 就沒什麼東西可說了，剩下的都是些細枝末節或者很直觀的東西。對，把最抽象的這部分理解了， CSS 就沒有任何難度可言了。

　　如果你的制圖習慣比較良好(良好的意思是有比較完整地執行這裡：http://hao.uisdc.com 的規則)，有好好對圖層進行分組，那麼你就已經對你的設計稿完成了最初步的切版工作。按照你切的版，把元素一個個碼好，你的頁面就搞定了。然而實際上的頁面並不是像PSD設計稿那麼安分，它有可能這個部分要一直固定在屏幕頂端，那個部分的內容時多時少，因此才要學會 CSS 的“布局語言”。

　　常規流

　　我們通常講的塊級元素與行內元素的默認表現，就是它們在常規流中的表現。有一個名為display的 CSS 屬性可以修改它們的表現形式。在默認情況下，塊級元素的display屬性值為block，行內元素的屬性值為inline，如果你把某個a元素的display屬性值改成block，那麼這個a元素就會像一個塊級元素一樣表現自己了。另外還有一個比較特殊的屬性值為inline-block，顧名思義是像行內元素那樣排列的塊級元素，一般情況下，在想要並列排列某些塊級元素的時候，就可以把它們的display屬性值改成inline-block(無獎問答：為什麼不直接改成inline呢?)

　　相對定位

　　一般的教程會把相對定位和絕對定位一起放在浮動的前面或者後面，而我選擇這麼安排內容的原因之一是我想要強調相對定位的元素仍然在常規流中(事實上W3C標准 http://www.w3.org 也是如此安排目錄的)。

　　position:relative的元素就擁有了相對定位的能力，而用戶可以通過上下左右(top、bottom、left、right)四個屬性值(但是通常只使用top和left，因為這裡允許使用負數，right = -left)來在視覺上“推走”這個元素。相對定位最大的特點就是，元素的本體還在那裡，而用戶看到的則未必(上下左右都不設置或者為0的時候，元素仍舊在那裡)，定位方式是“相對於原位置定位”，因此被稱為相對定位。而其真正在定位上的應用，通常不是在大框架的布局，而是一些小地方、小細節的微調，而其更常見的用法，會在下面再次提到。

　　當然一個超級普通毫無特色常規流塊級元素根本無法滿足我們對豐富布局的需求，所以出現了人間大殺器——float。

　　浮動

　　當我們將某個元素的float屬性改為left或者right的時候，這個元素就成為了一個浮動的塊級元素。

　　首先它仍然是一個塊級元素(如果它原本是一個內聯元素，那麼此時它也變成了塊級元素)——擁有padding、border、margin，可以設置寬高。其次它浮起來了：

　　它脫離了常規流

　　它的寬度變成了它內容的寬度

　　它向著你規定的方向擠成一堆

　　這些事意味著什麼呢：

　　浮動元素的寬度變成了其內容所需的最小寬度。如果這個元素裡面還有一個常規塊級元素呢?那就要看這個常規塊級元素多寬咯(它沒定義寬度，那還是100%)。

　　浮動元素後面的常規元素看不見他(因為他們不在同一個“流”裡了)，浮動元素的父元素也看不見他(視而不見)，只有行框看得見——文字會繞著它們排列。

　　浮動元素會按著所規定的方向一個接一個水平排列，如果水平位置不夠則換到下一行，如果水平位置和垂直位置都還有剩，則會優先往上放。

　　浮動元素與父元素、浮動元素之間的內外邊界不會相交。也就是說，浮動元素以及其父元素的padding、margin區域都不會重疊。

　　浮動元素的頂邊不會超過源代碼中它前面出現元素所生成行框的頂。

　　幾乎所有關於浮動布局可能出現的問題，都可以在上面這幾條中找到原因。舉個栗子：

　　兩列布局

　　微博就是最典型的兩列布局(新版V6的登錄後首頁變成三列了，不過用戶頁面仍然是兩列…)，這種兩列式的布局解決方法很簡單，兩個固定寬度的div，一起向左浮動，或者一個向左、一個向右。

　　而在很多游戲網站中，為了盡可能利用大屏幕的優勢，而把頁面設計成左邊有一個固定寬度的導航，右側全屏占滿，在這種情況下，上面的寫法就不成立了。不管兩個元素如何浮動，寬度都沒有辦法正好撐滿整個屏幕，雖然 CSS 中的width(寬度) 屬性可以使用百分比的值，但是當你將其設為100%的時候，它又掉下來了。此時最好的做法是將左邊欄(第一個 div)設為浮動，並且給一個固定的寬度(比如200px)。此時兩個 div 元素在同一高度上，但是右側的 div 看不到左側的那個，內容仍然從左上角開始顯示，此時只要給這個 div 的margin-left賦值為200px，就可以將右側div的左邊200px空出來，這樣兩列布局的基本就完成了。

　　清除浮動(Clear-fix)

　　有些人覺得Clear fix被翻譯為清除浮動並不合適，因為實際上浮動仍然還在(元素仍然漂浮著)，而這個術語的本意也應該是“清除浮動所造成的不良影響”，不過在中文圈子裡，從 clearfix 方法出生伊始，它就被叫做清除浮動了…所以也沒辦法啦╮(╯▽╰)╭。

　　它所修正的不良影響，主要是針對上面的第二條。浮動元素的父元素看不到它：如果某個塊級元素裡的所有子元素都是浮動的，那麼這個元素自身就不會有高度，在需要設置背景和邊框的時候，這種問題總像幽靈般如影隨形。解決方法也很成熟：

　　另外還有一個“真正的”清除屬性——clear，在上面的示例中也出現了，這個屬性規定了該元素的左側或右側是否可以與浮動元素相鄰——如果規定的方向有浮動元素，那麼這個元素就會向下排列(到底是有多討厭人家…)

　　絕對定位

　　還有一種比較特殊的定位方式，被稱為絕對定位，事實上我們PS文件中的圖層都是絕對定位。position:absolute的元素就成為了一個絕對定位元素，相對定位是相對於元素自身，而絕對定位也是針對元素自身而言——跟自身原本絕對沒關系。

　　絕對定位的元素完全脫離了常規流，可以說是“哪個元素都看不見它”。而它仍然需要一個定位的“原點”，W3C規定離絕對定位元素最近的position屬性為relative、absolute或fixed的祖先元素的內容框的左上角(有一個特例，就是該祖先元素為行內元素的時候，這裡不展開說明了，基本遇不到)，作為該元素絕對定位的原點。因此，其實，相對定位元素(position:relative)通常都被用於創建絕對定位元素的包含塊(containing block)，如果你有一個絕對定位元素，而它的位置跟你預想的不對，那就是其定位基准出問題了。而其定位方式一樣，是通過上下左右的值來規定的。

　　固定定位

　　position:fixed的元素就是固定定位元素，本質上它也是一種絕對定位，這種元素會固定於浏覽器窗口的固定位置，很多網站頂端的固定導航、右下角的固定廣告等等都是通過這種方式定位的。

　　定位關系

　　如果某個元素是絕對定位元素(position為absolute或fixed)，則float屬性對其無效，同時元素變為塊級元素。

　　而當某個元素的position不為static(position:static即為最普通的常規流中的元素)時，它們彼此之間就有可能發生重疊(就像PS圖層一樣，圖層重疊是很常見的)。

　　在源代碼中後出現的元素會覆蓋先出現的元素

　　浮 動元素會覆蓋常規流元素

　　絕對定位元素會覆蓋浮動元素

　　使用z-index可以無視上述三條規則z-index屬性可以規定圖層之前的層疊順序，其數值越大，該元素越靠“前”(疊在所有圖層的最上面)，如果你發現某個元素無論如何都覆蓋不了，檢查一下它的z-index屬性值，也許就能找到答案。

　　Flexible Box(伸縮盒模型)

　　display:flex的元素就會應用伸縮盒模型，它是 CSS 中真正為布局而生的模型。現在關於這個模型的相關文章還很少，而且各種問題也很多，因為從09年到現在，它經歷了3個大的版本變化，而這涉及到了大量手機及IE的版本兼容問題，導致很多網站都不願意采取這種布局方式。

　　使用這種模型布局進行布局最炫酷的一點是，我們不用再費力計算寬度然後為元素規定寬度，所有的寬度根據所有可用空間及內容進行分配，這樣對於個數不固定的元素也可以實現完美分配。空間分配方式有兩種：

　　1.按照盒的寬度比例分配

　　2.按照剩余空間比例分配

　　如果上面的說明有點不清楚，點這裡(http://bennettfeely.com)有一個DEMO，可以通過改變左邊各項屬性的值看到其結果。如果你們的項目只針對最新的iPhone(iOS7及以上)，你可以考慮拗你們的前端去嘗試使用這個模型來布局(我曾親測過絕大多數網上流傳的兼容代碼，全軍覆沒，主要國內有UC浏覽器這個大殺器)。

　　後

　　display規定了該元素所應用的模型，position規定了該元素的定位方式，二者共同構成了 CSS 定位與布局的基礎。另外W3C也提出了伸縮盒模型用於滿足復雜多變的布局需求，並且開始推薦廠商實現，如果各位有需要，在將來我可以單獨開一篇文章講這部分內容。