本篇內(nèi)容主要講解“如何理解CSS3網(wǎng)格的三個(gè)新特性”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“如何理解CSS3網(wǎng)格的三個(gè)新特性”吧!

成都創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),白水企業(yè)網(wǎng)站建設(shè),白水品牌網(wǎng)站建設(shè),網(wǎng)站定制,白水網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,白水網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

一、網(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ù)雜的是，我們的頁面寬度不再是靜態(tài)的。響應(yīng)式大行其道，所以我們傾向于基于百分比的列寬?；诠潭?60像素寬的簡(jiǎn)單網(wǎng)格已經(jīng)行不通——我們需要流體網(wǎng)格。

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

通過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)單來說，一個(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ì)。通過設(shè)置box-sizing的值為border-box可以解決這個(gè)問題。通過減少內(nèi)容寬度使邊和內(nèi)邊距的距離也算到width屬性里。

HTML

代碼如下:

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; }

效果

雖然這工作的很棒，但我們?nèi)匀恍枰褂酶?dòng)，我們?nèi)匀恍枰宄?dòng)。此外，我們我們只能使用內(nèi)邊距作為元素的空間，外邊距不再起作用。這意味著在快元素之間沒有實(shí)際的空間，而是它的內(nèi)容。雖然這對(duì)很多設(shè)計(jì)非常有用，但仍然覺得它是個(gè)小錯(cuò)誤。

1.Firefox 1
2.Chrome 1
3.IE 8
4.Opera 7
5.Safari 3

三、width: calc(百分比 – 距離)

另一個(gè)偉大的選擇是使用calc()函數(shù)。他允許我們?cè)诓灰蕾嘕avaScript的情況下計(jì)算元素的真實(shí)寬度——可以是不同的單位！

HTML

代碼如下:

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; }

效果：

重新計(jì)算實(shí)際尺寸的能力是一個(gè)偉大的選擇，但不幸的的是，我們?nèi)匀恍枰?dòng)，我們也需要列的容器為負(fù)外邊距。同上，一個(gè)很棒的選擇，但仍然有些瑕疵。

1.Firefox 4
2.Chrome 19
3.IE 9
4.Opera ?
5.Safari 6 (appears to be a little buggy)

四、Flexbox

伸縮布局盒是有特定配置行為的元素——有點(diǎn)像表格。這是真的嗎？是的沒錯(cuò)。表格的行為實(shí)際上相當(dāng)棒，因?yàn)樗娘@示依據(jù)它的內(nèi)容而變化。但現(xiàn)在已經(jīng)不再使用表格布局，所以表格標(biāo)簽不是一個(gè)選項(xiàng)。
起初，伸縮盒看起來有待年復(fù)雜。有很多很難理解的屬性，尤其像我這樣不擅用英語演講的人。幸運(yùn)的是，Chirs Coyier寫了一個(gè)關(guān)于伸縮盒的偉大指導(dǎo)，我必須提到。
HTML

代碼如下:

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; }

效果：

到此，相信大家對(duì)“如何理解CSS3網(wǎng)格的三個(gè)新特性”有了更深的了解，不妨來實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！