css3属性：column分栏

浏览数：19 / 时间：2015年06月09日

css3选择器中提出了分栏的属性，其浏览器支持情况为：Internet Explorer 10 和 Opera 支持 column 属性，Firefox 支持替代的 -moz-column 属性，Safari 和 Chrome 支持替代的 -webkit-column 属性。即在书写样式时要加上相应的浏览器前缀。

注意：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

column语法：

1 栏的数量控制，即可以定义分栏的数目。

column-count : auto | 整数;

auto是默认值，由其他属性决定列数，比如 "column-width"。

整数是将元素内容划分为最佳列数。

注意：如果样式里边都有column-width：200px；column-count:4;

浏览器首先解析的是column-width属性，即分栏的宽度。

2 定义两栏之间的间距距离

column-gap : normal | <length>;

normal规定列间间隔为一个常规的间隔，W3C 建议的值是 1em。

length把列间的间隔设置为指定的长度。

3 栏间距

column-width:[<length>|auto] 定义每栏的宽度。

4 column-rule 属性设置列宽度、样式和颜色规则。

默认值为:column-rule:medium none black;

5 column-rule-color:<color> ;

定义每栏之间边框的颜色，默认值为黑色，black。

6 定义每栏之间边框的宽度

column-rule-width:<length>/thin/thick/medium；

thin：定义纤细规则。

medium：定义中等规则，默认值

thick：定义中等规则，默认值。

length：规定规则的宽度。

5 间隔线样式

none	定义没有规则。
hidden	定义隐藏边框规则。
dotted	定义点状线规则。
dashed	定义虚线规则。
solid	定义实线边框规则。
double	定义双线边框规则。
groove	定义 3D grooved（3D凹槽）规则。该效果取决于宽度和颜色值。
ridge	定义 3D ridged(3D凸槽 ) 规则。该效果取决于宽度和颜色值。
inset	定义 3D inset 规则(3D凹边 )。该效果取决于宽度和颜色值。
outset	定义 3D outset(凸边 ) 规则。该效果取决于宽度和颜色值。