設(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í)。
本文地址:http://likemindfilms.com/tutorial/wd2592.html