本篇主要講布局相關的樣式。
1、多欄布局。
在css3之前，若要實現分欄的效果，可以使用浮動（float）來實現。但是這樣會有乙個缺點就是，分欄時造成分欄的幾個欄不能對齊。
而在css3中，可以通過column-count屬性來進行多欄布局，這個屬性的含義是將乙個元素中的內容分成多欄進行顯示。
使用方法： column-count: 欄目數;
相容性寫法：
-webkit-column-count:3; /*chrome和safari*/
-moz-column-count:3; /*火狐瀏覽器*/
-o-column-count:3;/*歐朋瀏覽器*/
-ms-column-count:3; /* ie 9 */
需要注意的是，在使用多欄布局的時候，要將元素的寬度設定成多個欄目的總寬度。
1.1 column-width屬性：指定欄目的寬度來生成分欄。
相容性寫法： -webkit-column-width、-moz-column-width。
1.2 column-gap屬性：指定欄目與欄目之間的距離。
相容性寫法： -webkit-column-gap、-moz-column-gap。
1.3 column-rule屬性：欄目與欄目之間增加一條分割線。
相容性寫法： -webkit-column-rule、-moz-column-rule。
2、盒布局
在css3中，可以使用box屬性來使用盒布局，是的多欄底部對其，如火狐中使用-moz-box，否則需要使用float來指定。
3、彈性盒布局
在css3中只要我們使用乙個box-flex屬性，就可以使得我們的盒布局變成彈性盒布局了，它可以讓div的寬度隨著瀏覽器視窗的變化而變化。其相容性寫法：
-webkit-box-flex (safari瀏覽器、chrome瀏覽器)
-moz-box-flex(火狐瀏覽器)
改變元素的顯示順序；在使用彈性盒布局時，可以使用box-ordinal-group屬性改變各個元素的顯示順序，在每個元素中加入box-ordinal-group屬性，該屬性使用乙個表示序號的正數屬性值，瀏覽器的顯示的時候根據序號從小到大來顯示這些元素。其相容性寫法：
-webkit-box-ordinal-group
-moz-box-ordinal-group
還可以改變元素的排列方向；在使用彈性盒布局時，可以使用box-orient來指定多個元素的排列方向。其相容性寫法：
-webkit-box-orient
：horizontal
-moz-box-orient
:vertical
CSS3布局樣式
css3多列布局columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的...
CSS3布局樣式
1.多列布局 columns 為了能在web頁面中方便實現類似報紙 雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組 css multi column layout module 它主要應用在文字的多列布局方面。columns column width column count 引...
CSS3 控制樣式，網頁布局
background origin 規定背景的定位區域。padding box 背景影象相對內邊距定位 預設值 border box 背景影象相對邊框定位 以邊框左上角為參照進行位置設定 content box 背景影象相對內容區域定位 以內容區域左上角為參照進行位置設定 備註 1.預設盒子的背景是...