最近買了基本書，因為在實習的時候用到很多css動畫，**給任務的時候，也會讓布局一些設計頁面。在做的過程中，覺著自己的css功底還是不行，所以就想再多積累多學習。今天主要看的是大漠的《**css3》，看知乎上和很多人的技術部落格裡都推薦過。
今天先說css3的多列布局。平時用到的比較多的是兩欄布局，三欄布局。方法也有好幾種，浮動float、定位position、行內快inline-block。要是再多幾列，其實實現起來還是挺麻煩的。但是css3裡面新增了多列布局的特性。只不過使用的時候還是要注意瀏覽器相容性，需要加字首，-webkit-/ -moz-
主要屬性如下：
columns:整合column-width和column-count；
ex.columns: 9em 4;//每列寬9em,分為4列
column-width:定義每列的寬度
ex.column-width: auto;//預設值，列寬由其他屬性決定
column-width: 9em;//固定值
column-count:定義分列的列數
ex.column-count: 4;//分為4列
column-gap:定義列與列的間距，類似與margin
ex.column-gap: 2em;//列與列之間間隔為2個字元
column-rule:定義列的邊框，類似與border
ex.column-rule: 1px solid #ccc;
column-span:定義跨列效果
ex.column-span: all;//元素跨越所有列，並定位在列的z軸之上
column-fill:控制每列的列高效果
1、使用時記得考慮瀏覽器相容
2、計算好容器的寬度和列的寬度及列間距的寬度。如果列寬+邊距寬》容器寬，則不會顯示多列，只會顯示一列
CSS3多列布局
css3多列布局可以自動將內容按指定的列數排列，它實現了和報紙 雜誌排版非常相似的布局效果。一 css3多列布局核心屬性 1 columns 整合column width和column count兩個屬性。2 column width 定義每列列寬度 3 column count 定義分列列數 4 ...
CSS3多列布局
在本章中，您將學習如下多列屬性 屬性 瀏覽器支援 column count column gap column rule internet explorer 10 和 opera 支援多列屬性。firefox 需要字首 moz chrome 和 safari 需要字首 webkit 注釋 inter...
CSS3多列布局
屬性及版本css3提供了columns多列布局屬性等7個屬性集合，具體如下 columns整合column width和column count兩個屬性 column width定義每列列寬度 column count定義分分列列數 column gap定義列間距 column rule定義列邊框 ...