一、網(wǎng)格簡(jiǎn)史

曾幾何時(shí)，我們的布局是一團(tuán)糟。表格和框架是用于創(chuàng)建多列布局的主要工具。雖然他們能完成工作（但其實(shí)非常糟糕）。

把目光投向今天。HTML和CSS已經(jīng)變得非常復(fù)雜，Web設(shè)計(jì)的知名度和復(fù)雜度與日俱增。我們?cè)?jīng)使用的舊的布局方法顯然已經(jīng)out了。然而，一個(gè)歷史遺留問題浮出水面：多列布局。

更復(fù)雜的是，我們的頁(yè)面寬度不再是靜態(tài)的。響應(yīng)式大行其道，所以我們傾向于基于百分比的列寬。基于固定960像素寬的簡(jiǎn)單網(wǎng)格已經(jīng)行不通——我們需要流體網(wǎng)格。

CSS2規(guī)范中用浮動(dòng)解決列的方法存在一個(gè)問題。為了防止父元素破環(huán)你的布局，我們需要添加clearfix。通過(guò)這種方法，來(lái)修正父元素的高度坍塌問題（浮動(dòng)元素脫離標(biāo)準(zhǔn)流，父元素會(huì)認(rèn)為浮動(dòng)資源不存在）。我們大部分接受這種方法，但許多人仍然認(rèn)為它是一種hack（奇技淫巧）。

通過(guò)inline-box的方法并不常見，但仍然存在。內(nèi)聯(lián)元素會(huì)保持在一行，他們自然順序排列。當(dāng)一行被占滿，后面的元素自然折到下一行。但因?yàn)樗憩F(xiàn)為文本特性，其行為類似文本。這意味著你必須避免HTML元素之間的空白元素(空格，tab，換行……)。Inline-block不是為這設(shè)計(jì)的，不且工作的并不十分如意。

在這兩種方法中，浮動(dòng)的方法更可靠。這就是為什么它更流行，排在第一位。然而，創(chuàng)建多列后，我們發(fā)現(xiàn)需要再次壓縮內(nèi)容，因?yàn)槲覀冃枰恍┨畛渚嚯x。這就引出最終的問題：盒模型

盒模型是什么，簡(jiǎn)單來(lái)說(shuō)，一個(gè)元素的實(shí)際尺寸包括：高度/寬度+內(nèi)邊距+邊的寬度。外邊據(jù)并不使盒子變大，僅僅在自己和其他元素之間增加空隙。所以設(shè)置寬度時(shí),比如25%，其盒子的實(shí)際寬度比這大得多，這意味著在一行沒有足夠的空間放下四個(gè)元素。

這煩人的問題有不同的解決方案：負(fù)外邊距，嵌套元素——我知道的全部了。他們都需要額外的CSS或DOM元素，算作hack方法。讓我們面對(duì)現(xiàn)實(shí)，CSS2中沒有解決網(wǎng)格的好方法。

然而今天，CSS3提供很好的支持，規(guī)范增加了專門用于網(wǎng)格的幾個(gè)新特性。這些特性都有哪些？我們?nèi)绾问褂盟麄儯孔屛覀兛匆豢础?/p>

二、box-sizing: border-box

已經(jīng)解決的問題之一是擴(kuò)展盒模型的性質(zhì)。通過(guò)設(shè)置box-sizing的值為border-box可以解決這個(gè)問題。通過(guò)減少內(nèi)容寬度使邊和內(nèi)邊距的距離也算到width屬性里。

HTML

復(fù)制代碼代碼如下:
<div class=”row”>
<div class=”column”>Col one</div>
<div class=”column”>Col two</div>
<div class=”column”>Col three</div>
<div class=”column”>Col four</div>
</div>