設(shè)計師們代碼指南之定位與布局

如果你的制圖習(xí)慣比較良好，有好好對圖層進行分組，那么你就已經(jīng)對你的設(shè)計稿完成了最初步的切版工作。按照你切的版，把元素一個個碼好，你的頁面就搞定了。然而實際上的頁面并不是像PSD設(shè)計稿那么安分，它有可能這個部分要一直固定在屏幕頂端，那個部分的內(nèi)容時多時少，因此才要學(xué)會 CSS 的“布局語言”。

　　常規(guī)流

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

　　相對定位

　　一般的教程會把相對定位和絕對定位一起放在浮動的前面或者后面，而我選擇這么安排內(nèi)容的原因之一是我想要強調(diào)相對定位的元素仍然在常規(guī)流中(事實上W3C標(biāo)準(zhǔn) http://www.w3.org 也是如此安排目錄的)。

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

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

　　浮動

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

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

　　它脫離了常規(guī)流

　　它的寬度變成了它內(nèi)容的寬度

　　它向著你規(guī)定的方向擠成一堆

　　這些事意味著什么呢：

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

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

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

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

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

　　幾乎所有關(guān)于浮動布局可能出現(xiàn)的問題，都可以在上面這幾條中找到原因。舉個栗子：

　　兩列布局

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

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

　　清除浮動(Clear-fix)

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

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

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

　　絕對定位

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

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

　　固定定位

　　position:fixed的元素就是固定定位元素，本質(zhì)上它也是一種絕對定位，這種元素會固定于瀏覽器窗口的固定位置，很多網(wǎng)站頂端的固定導(dǎo)航、右下角的固定廣告等等都是通過這種方式定位的。

　　定位關(guān)系

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

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

　　在源代碼中后出現(xiàn)的元素會覆蓋先出現(xiàn)的元素

　　浮 動元素會覆蓋常規(guī)流元素

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

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

　　Flexible Box(伸縮盒模型)

　　display:flex的元素就會應(yīng)用伸縮盒模型，它是 CSS 中真正為布局而生的模型?，F(xiàn)在關(guān)于這個模型的相關(guān)文章還很少，而且各種問題也很多，因為從09年到現(xiàn)在，它經(jīng)歷了3個大的版本變化，而這涉及到了大量手機及IE的版本兼容問題，導(dǎo)致很多網(wǎng)站都不愿意采取這種布局方式。

　　使用這種模型布局進行布局最炫酷的一點是，我們不用再費力計算寬度然后為元素規(guī)定寬度，所有的寬度根據(jù)所有可用空間及內(nèi)容進行分配，這樣對于個數(shù)不固定的元素也可以實現(xiàn)完美分配。空間分配方式有兩種：

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

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

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

　　后

　　display規(guī)定了該元素所應(yīng)用的模型，position規(guī)定了該元素的定位方式，二者共同構(gòu)成了 CSS 定位與布局的基礎(chǔ)。另外W3C也提出了伸縮盒模型用于滿足復(fù)雜多變的布局需求，并且開始推薦廠商實現(xiàn)，如果各位有需要，在將來我可以單獨開一篇文章講這部分內(nèi)容。

　　定位與布局在整個 CSS 當(dāng)中是最難掌握的，這里我提到內(nèi)容也只是最容易發(fā)生的問題，對于初入代碼門的設(shè)計師來說，基本上是夠用了。但是很多前端工程師(不僅是處女座的)多少都會有一些代碼潔癖，對代碼中的嵌套包含關(guān)系也很在意，比如代碼層級關(guān)系與內(nèi)容層級之間的聯(lián)系，不愿意僅僅為了布局而增加一個額外的元素，這種時候精通各種 CSS 布局方式及其特點就顯得很有必要了。各位可以根據(jù)自己的程度選擇自己想要深入到何處~

　　最后關(guān)于相關(guān)的教程，除了W3C School的定位系列(www.w3school.com)之外，我還推薦CSDN的說說標(biāo)準(zhǔn)系列(http://bbs.csdn.net)。前者應(yīng)用型很強還帶有很多示例，適合初學(xué)者以應(yīng)用為目的的基礎(chǔ)學(xué)習(xí)，后者則是推薦給那些想要進階為前端工程師的人，深入了解 W3C 對盒模型及定位的定義，同時也有很多示例代碼可供學(xué)習(xí)。