首先，新增的布局屬性需要新增各瀏覽器的私有字首。-moz,-webidt,-ms,-o
1，多列布局 ——cloumns
cloumns:200px 3;
200px: 定義多列中每列的寬度
3：定義多列中的列數
相當於 cloumns-width:200px; cloumns-count:3
如果要調整列與列直接的間距，可以使用
column-gap:2em;
如果要用來定義列與列之間的邊框寬度，邊框樣式和邊框顏色，他不占用任何空間
位置。column-rule:2px dottoed green;
如果乙個分列元素中的子元素需要跨多列，那麼需要用到
column-span：none|all
all :跨越所有
2,盒子模型——box-sizing
在css中盒模型被分為兩種，第一種是w3c的標準模型，另一種是ie的傳統模型，它們相
同之處都是對元素計算尺寸的模型，具體說不是對元素的width、height、padding和border
以及元素實際尺寸的計算關係
box-sizing:content-box ; border-box ;inhert
在自適應布局中，在元素基礎上新增內距padding,按照標準盒模型解析，往往會將布局撐破，
但使用border-box，便可以解決。
3，伸縮布局——flexbox布局
響應式不可缺少的，
功能：（1），螢幕和瀏覽器視窗大小發生改變可以靈活調整；
（2），可以指定伸縮專案沿主軸或側軸按比例分配的額外空間，從而調整伸縮專案的大小；
（3），可以指定伸縮專案沿主軸或側軸將伸縮容器額外空間，分配到伸縮專案之前，之後或
之間；（4），可以指定如何將垂直於元素布局軸的額外空間分布到該元素的周圍；
（5），可以控制元素在頁面上的布局方向；
（6），可以按照不同的dom所指定排序方式對螢幕元素重新排序。也就是說可以在瀏覽器渲
染中不按照文件流先後順序重排伸縮專案順序。
使用方法：
（1），建立乙個flex容器
.flexcontainer56
7.flexcontainer
1213
.flexcontainer
2122
2324
.ss30
3132
style
>
33<
div
class
="flexcontainer"
>
34<
div
class
="ss"
>
div>
35<
div
class
="ss"
>
div>
36<
div
class
="ss"
>
div>
37div
>
掌握css3布局
在傳統的浮動 定位基礎之上，css3提供了一系列新的布局方式，包括彈性盒模型 多列 查詢等，利用這些布局方式我們可以靈活地應對複雜網頁布局，本文通過屬性詳解 實戰案例的方式向您展示這些新興布局方式的強大之處。1.彈性盒模型 彈性盒布局模型 flexible box layout 是 css3 規範中...
css3 布局 文字
它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，css3的多列布局可以輕鬆實現 語法 columns 多列布局columns屬性引數主要就兩個屬性引數 列寬和列數。引數 引數說明 主要用來定義多列中每列的寬度 主要...
CSS3 彈性布局
掌握傳統布局與css3新增彈性布局方式的實現和應用 彈性布局 彈性伸縮布局 事實上它是一種新型別的盒子模型，也有書上稱作彈性伸縮盒布局。比較新的布局方式 旨在提供乙個更加有效的方式來布置，對齊和分布在容器之間的各項內容，即使它們的大小是未知或者動態變化的。彈性布局的主要思想是讓容器有能力來改變專案的...