CSS3多列布局

最近买了基本书，因为在实习的时候用到很多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、计算好容器的宽度和列的宽度及列间距的宽度。如果列宽+边距宽>容器宽，则不会显示多列，只会显示一列