css3属性：column分栏

    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 间隔线样式 

  column-rule-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset ;

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

6  column-span : all/none;是否跨栏显示。

    none:只在本栏中显示；

    all:横跨所有栏目并定位在栏目的Z轴之上。

注意： column大部分属性都是在为其父级元添加属性样式。

       column-span：all/none；是给其自身添加属性样式。是否跨栏显示。

 

7 columns 属性是column-width，column-height的复合属性。用于规定分栏的宽度和列数。

　　columns:column-width column-height;

　　默认值是auto，即columns:auto auto;

 

转载于:https://www.cnblogs.com/DianaVictory/p/3558010.html