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

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

　　常規(guī)流

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

　　相對(duì)定位

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

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

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

　　浮動(dòng)

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

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

　　它脫離了常規(guī)流

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

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

　　這些事意味著什么呢：

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

　　浮動(dòng)元素后面的常規(guī)元素看不見他(因?yàn)樗麄儾辉谕粋€(gè)“流”里了)，浮動(dòng)元素的父元素也看不見他(視而不見)，只有行框看得見——文字會(huì)繞著它們排列。

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

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

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

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

　　兩列布局

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

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

　　清除浮動(dòng)(Clear-fix)

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

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

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

　　絕對(duì)定位

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

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

　　固定定位

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

　　定位關(guān)系

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

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

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

　　浮 動(dòng)元素會(huì)覆蓋常規(guī)流元素

　　絕對(duì)定位元素會(huì)覆蓋浮動(dòng)元素

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

　　Flexible Box(伸縮盒模型)

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

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

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

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

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

　　后

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

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

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