在這篇文章中,我們將來看一些CSS3新屬性,從而用HTML和CSS處理網(wǎng)格的時候更容易。但首先讓我們討論一點HTML和CSS網(wǎng)格的歷史,了解清楚為什么以前很困難。
曾幾何時,我們的布局是一團(tuán)糟。表格和框架是用于創(chuàng)建多列布局的主要工具。雖然他們能完成工作(但其實非常糟糕)。
把目光投向今天。HTML和CSS已經(jīng)變得非常復(fù)雜,Web設(shè)計的知名度和復(fù)雜度與日俱增。我們曾經(jīng)使用的舊的布局方法顯然已經(jīng)out了。然而,一個歷史遺留問題浮出水面:多列布局。
更復(fù)雜的是,我們的頁面寬度不再是靜態(tài)的。響應(yīng)式大行其道,所以我們傾向于基于百分比的列寬?;诠潭?60像素寬的簡單網(wǎng)格已經(jīng)行不通——我們需要流體網(wǎng)格。
CSS2規(guī)范中用浮動解決列的方法存在一個問題。為了防止父元素破環(huán)你的布局,我們需要添加clearfix。通過這種方法,來修正父元素的高度坍塌問題(浮動元素脫離標(biāo)準(zhǔn)流,父元素會認(rèn)為浮動資源不存在)。我們大部分接受這種方法,但許多人仍然認(rèn)為它是一種hack(奇技淫巧)。
通過inline-box的方法并不常見,但仍然存在。內(nèi)聯(lián)元素會保持在一行,他們自然順序排列。當(dāng)一行被占滿,后面的元素自然折到下一行。但因為他表現(xiàn)為文本特性,其行為類似文本。這意味著你必須避免HTML元素之間的空白元素(空格,tab,換行……)。Inline-block不是為這設(shè)計的,不且工作的并不十分如意。
在這兩種方法中,浮動的方法更可靠。這就是為什么它更流行,排在第一位。然而,創(chuàng)建多列后,我們發(fā)現(xiàn)需要再次壓縮內(nèi)容,因為我們需要一些填充距離。這就引出最終的問題:盒模型
盒模型是什么,簡單來說,一個元素的實際尺寸包括:高度/寬度+內(nèi)邊距+邊的寬度。外邊據(jù)并不使盒子變大,僅僅在自己和其他元素之間增加空隙。所以設(shè)置寬度時,比如25%,其盒子的實際寬度比這大得多,這意味著在一行沒有足夠的空間放下四個元素。
這煩人的問題有不同的解決方案:負(fù)外邊距,嵌套元素——我知道的全部了。他們都需要額外的CSS或DOM元素,算作hack方法。讓我們面對現(xiàn)實,CSS2中沒有解決網(wǎng)格的好方法。
然而今天,CSS3提供很好的支持,規(guī)范增加了專門用于網(wǎng)格的幾個新特性。這些特性都有哪些?我們?nèi)绾问褂盟麄??讓我們看一看?/p>
已經(jīng)解決的問題之一是擴(kuò)展盒模型的性質(zhì)。通過設(shè)置box-sizing的值為border-box可以解決這個問題。通過減少內(nèi)容寬度使邊和內(nèi)邊距的距離也算到width屬性里。
HTML
<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>
CSS
.row:after {
clear: both;
content: '';
display: block;
}
.column {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
min-height: 8em;
overflow: hidden;
padding: 2em;
width: 25%;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }
Demo
雖然這工作的很棒,但我們?nèi)匀恍枰褂酶?,我們?nèi)匀恍枰宄印4送?,我們我們只能使用?nèi)邊距作為元素的空間,外邊距不再起作用。這意味著在快元素之間沒有實際的空間,而是它的內(nèi)容。雖然這對很多設(shè)計非常有用,但仍然覺得它是個小錯誤。
另一個偉大的選擇是使用calc()函數(shù)。他允許我們在不依賴JavaScript的情況下計算元素的真實寬度——可以是不同的單位!
HTML
<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>
CSS
.row { margin-left: -1em; }
.row:after {
clear: both;
content: '';
display: block;
}
.column {
float: left;
margin-left: 1em;
min-height: 8em;
padding: 1em;
width: -webkit-calc(25% - 3em);
width: -moz-calc(25% - 3em);
width: calc(25% - 3em);
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }
Demo
重新計算實際尺寸的能力是一個偉大的選擇,但不幸的的是,我們?nèi)匀恍枰樱覀円残枰械娜萜鳛樨?fù)外邊距。同上,一個很棒的選擇,但仍然有些瑕疵。
伸縮布局盒是有特定配置行為的元素——有點像表格。這是真的嗎?是的沒錯。表格的行為實際上相當(dāng)棒,因為它的顯示依據(jù)它的內(nèi)容而變化。但現(xiàn)在已經(jīng)不再使用表格布局,所以表格標(biāo)簽不是一個選項。 起初,伸縮盒看起來有待年復(fù)雜。有很多很難理解的屬性,尤其像我這樣不擅用英語演講的人。幸運(yùn)的是,Chirs Coyier寫了一個關(guān)于伸縮盒的偉大指導(dǎo),我必須提到。
HTML
<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>
CSS
.row {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-flex-wrap: nowrap;
-webkit-justify-content: space-between;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
}
.column {
margin: 0.5em;
min-height: 8em;
padding: 1em;
width: 25%;
}
.column:nth-child(1) { background-color: #9df5ba; }
.column:nth-child(2) { background-color: #9df5d7; }
.column:nth-child(3) { background-color: #9df5f5; }
.column:nth-child(4) { background-color: #9dd7f5; }
Demo
就這么簡單!但……瀏覽器的支持不是很好。
盡管CSS3帶來了許多新特性并且修復(fù)了一些歷史遺留問題,在我看來,伸縮盒布局是用CSS創(chuàng)建彈性網(wǎng)格的唯一非hack方法。然而,不幸的是瀏覽器的支持表現(xiàn)平平。盡管如何,其他方法豐富了表現(xiàn),所以他們是一個進(jìn)步,并且他們有很好的瀏覽器支持。
原文:http://flippinawesome.org/2014/03/03/grids-in-css3/
更多建議: