CSS3多列布局

CSS3多列布局可以自动将内容按指定的列数排列，它实现了和报纸、杂志排版非常相似的布局效果。

一、CSS3多列布局核心属性：

1、columns：集成column-width和column-count两个属性。

2、column-width：定义每列列宽度

3、column-count：定义分列列数

4、column-gap：定义列间距

5、column-rule：定义列边框

6、column-span：定义多列布局中子元素跨列效果

7、column-fill：控制每列的列高度。

二、浏览器兼容性，需要加前缀。具体使用形式：(以columns属性为例，其他的属性使用方式与此相同)

-moz-columns: 9em 4;-webkit-columns:9em 4;columns:9em 4;

三、各个属性介绍：

1、column-width：定义每列列宽度，取值：

（1）auto：默认值，则列宽将由其他属性来决定，如column-count。且为auto时，只有配合其他属性一起使用才有效果。

（2）<length>：长度值，不能为负值。

2、column-count：指定列数（可以认为其指定了最大列数，当总宽度不够时，实现效果的列数可能为小于指定的列数），取值：

（1）auto：默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。

（2）<integer>：正整数，为大于0的正整数。

3、column-gap：定义列间距，取值为normal（一般相当于1em）和长度值（不能为负值）

4、column-rule：定义列边框。

（1）它和块框的border属性很相似，也接收三个空格分开的值，分别表示宽度、样式和颜色。例如：、

-moz-column-rule:2px dashed #ccc-webkit-column-rule:2px dashed #ccccolumn-rule:2px dashed #ccc

（2）其宽度并不影响列的布局，它不占据任何空间位置，其在Z轴上介于background和content之间，其宽度大到超过列间距时会自动消失。

5、column-span：跨列属性，用于定义一个分列元素中的子元素能跨多少列，例如让一个标题跨越所有列，取值：

（1）none：默认值，表示不跨越任何列。

（2）all：表示元素跨越所有列，并定位在列的Z轴之上。

6、colum-fill：主要用于定义多列中每一列的高度是否统一，取值：

（1）auto：默认值，各列的高度随其内容的变化而变化。

（2）balance：各列的高度将会根据内容最多的一列的高度进行统一。