CSS佈局標準

回顧歷史，CSS1於1996.12.17發正式版，它是爲輔助HTML的展示效果而生的。
1998.5.12，CSS2發正式版。隨後發修訂版CSS2.1，糾正了CSS2中的一些錯誤。注意從CSS2起，CSS的做用就不是輔助展示了，變爲全全負責展示。
（注：當年CSS2的勘誤表有興趣能夠看看）

CSS2.1明確了2個模型，一個是衆所周知的盒模型(Box model)，CSS1沒有盒模型的概念，盒模型的前身在CSS1裏叫作面向盒的格式化模型。元素抽象爲盒，以盒爲對象設計思路清晰多了。CSS3的盒模型豐富了更多屬性。盒的產生，以及盒的定位就是CSS2.1定義的第二個模型－可視格式化模型(Visual Formatting Model)。CSS3相關的佈局標準實際上也在這個大的框架之下。

CSS佈局有明確標準始於CSS2。CSS1裏壓根沒提佈局，雖然CSS1裏有Float元素的定義，但它的設計不是爲頁面佈局，只是爲了實現圖文繞排。早期用table佈局便瓜熟蒂落。CSS2是98年變爲推薦標準的，按理此時應該普及新的CSS佈局標準，但table佈局的使用習慣一直保持到2004年才被Jeffrey Zeldman那本書點醒。05年它的中文版《網站重構》出版，國內掀起重構浪潮。早期網頁開發者是受軟件教育的(Frontpage, Dreamweaver之類)，徹底沒有標準的概念。

因此要從標準出發學習CSS，而不是僅僅掌握一些工具(包括一些庫)。這是有前車可鑑的。

回到佈局的話題上。CSS2.1的佈局分爲3種：
1. 常規流(Normal Flow)
2. 浮動(Float)
3. 絕對定位(Absolute Position)

這3種不能混用。若是代碼裏看到position:absolute;display:block;這種明顯是概念混亂。不少人也錯把position:relative跟position:absolute歸爲一類。position:relative是常規流中的一種，例外是它能夠和Float一塊兒使用。關於CSS2.1佈局的闡述請看這裏：http://kejun.github.io/bootcamp_htmlcss/?5。

IE6時代被忽視的常規流佈局：
1. Inline-Block。兼容性：http://caniuse.com/#feat=inline-block，觸發IE的hasLayout能夠實現類似的效果，以致於能夠兼容IE6/7，逐漸被普遍應用。
2. CSS Table。兼容性：http://caniuse.com/#feat=css-table，僅僅不兼容IE6/7，在IE6時代被埋沒。隨着IE6/7的淡出終有出頭之日了。

「對float的濫用就像當年對table的濫用「。不少人設計佈局時不假思索的用Float，明顯欠缺對佈局技術有更多瞭解。尤爲在低端瀏覽器日漸淡出，新的佈局技術觸手可及的當下，是時候學習實踐這些新技術了。以前作過一個demo，用6種思路實現同一種兩列布局：http://dabblet.com/gist/4094139。看完本文後，能夠有更多實現思路。

今天脫囗而出的CSS3只是一種籠統的叫法。有CSS Level 1，CSS Level 2，時至今日尚未CSS Level 3。CSS2.1之上的新標準大部分仍在WD狀態，只有CSS Color Level 3和Selectors Level 3進入REC狀態。

（注：PD – Public Draft, 公共草案，初步想法。不乏PD以後就廢棄的。WD – Working Draft, 工做草案。開始有人修訂它了。LC – Last Call, 對外宣佈了。CR – Candidate Recommendation, 候選推薦。REC – Recommendation，正式推薦。也就是正式版標準。這些狀態只能說明標準的穩定狀態。瀏覽器廠商從自身利益出發，選擇性的支持了一些仍處於WD狀態的標準。因而出現各類廠商前綴。標準制訂跟不上發展，瀏覽器廠商在競爭中冒進，苦逼的是開發者。）

新的佈局標準能夠更簡單更靈活的實現佈局。CSS3目前有5種佈局方案：
1. 多欄佈局(Multi-Column Layout )
2. 靈活盒佈局(Flexible Box Layout)
3. 柵格佈局(Grid Layout)
4. CSS3的浮動盒(CSS3 Floating Boxes)
5. Regions

Multi-Column Layout
當前狀態：CR
歷史：1999.6.23發PD，2009.12.17進入CR狀態
兼容性：http://caniuse.com/#feat=multicolumn 
Demo: http://dabblet.com/gist/5507829，
問題：
1. 目前只能平均分欄，還不支持分別指定欄寬（將來會有）。
2. 瀏覽器支持的新舊標準不一。
好比，上例中div.intro的內容想保持在一欄中，chrome支持column-break-inside: avoid;這是2005.12.15更新的WD中的標準。由此推測chrome遵循的是05年的WD標準。目前CR標準已改爲break-inside。Firefox20仍實現的是2001年的WD標準。
3. 多欄佈局更適合用於內容流佈局，不適合頁面佈局。

Flexible Box Layout
當前狀態: CR
歷史：2009.7.23發PD, 2011.3.22進入WD狀態，2012.9.18進入CR狀態
兼容性：http://caniuse.com/#feat=flexbox
Demo: http://dabblet.com/gist/5508104
理解它分爲兩部分：Flex容器(Flex Container)和Flex項(Flex Item)。
1. 定義Flex容器(display:flex)後, 它的一級子元素(inline box/block box/anonymous box)，可沿水平或垂直方向排列(flex-direction, 默認row)，可指定靠某一邊對齊(flex-wrap)，可指定對齊方式(justify-content)。每一個Flex項默認是等高的(align-items, 默認stretch)。
2. Flex項不指flex屬性時，寬度由實際內容的寬度決定。
3. Flex項能夠指定以什麼比例填充空白。如：
.list li { flex:1; } 則均勻填充。
.list li:nth-child(1) { flex: 4; background: #f80; }  本例中Flex Item 1的寬爲4/8。
4. flex屬性是能夠動畫的。
5. Flex項能夠控制順序(order, 默認0，值高在後面)。
參考：http://d.hatena.ne.jp/teramako/20121021/p1

曾在weibo上出過一道題：「實現一個不定寬高的層，在窗口中水平垂直居中」，用Flex Box能夠輕鬆實現:
html,body { height:100%; }
body { display:flex;justify-content:center;align-items:center; }

(Grid) Template Layout (曾經稱爲Advanced Layout)
當前狀態：WD
歷史：2005.12.15發PD, 2007.8.9進入WD狀態。最終合併進Grid Layout

Grid Position
歷史: 2007.9.5發PD，隨後被廢棄

Grid Layout
當前狀態：WD
歷史：2011.4.7發PD，2012.3.22進入WD狀態，最新一版是2013.4.2
兼容性：http://caniuse.com/#feat=css-grid ，
以這種兼容性還不值得學它。1996年有個基於幀佈局的草案。當時沒往這條路上走，最終絕對定位進入CSS2。Grid Layout正是建在它的基礎之上。

CSS3的浮動盒(CSS3 Floating Boxes)
當前狀態: WD
歷史：2002.10.24就出如今CSS basic box model的草案中。
CSS3的浮動盒太將來了，尚未瀏覽器支持。好比：
float: right contour; contour關鍵字，文字能夠沿圖片不規則的輪廓繞排。
min-height: contain-floats; 新的清浮動方式
float-displace: block; 新的float-displace屬性

Regions和Shapes
當前狀態：WD
歷史: 2011.6.9發表PD, 2011.11.29進入WD狀態，最新一版WD是2012.8.23
兼容性：http://caniuse.com/#feat=css-regions
Demo: http://dabblet.com/gist/5509294 Chrome 19+, IE10+
它適用於內容流佈局。兼容性有限，能夠先簡單看看。

Have Fun!