CSS3之栏目column

　　CSS3之栏目column是之前CSS2没有的属性，和背景边框等属性不一样，是之前没有的属性。这个属性是设置有关栏目的一系列数值的属性。CSS3之栏目column的属性主要有五个：column-width(栏目宽度)、column-count(栏目列数)、column-rule(栏目间隔线)、column-span(横跨栏目)和column-gap(栏目距离)。

　　column的属性的意思分别是：column-width是设置每个栏目的宽度，其取值是数字或者百分比。column-count是设置栏目列数，后面不用跟单位，只是代表栏目列数的数字。column-rule是设置栏目的间隔线，其取值和CSS2中的border是一样的。column-gap是设置栏目距离，这个距离是指两个列之间的距离。

　　一、column的语法

　　1、column-width(栏目宽度)

column-width(栏目宽度): number(数字) || auto(取计算机值)

　　2、column-count(栏目列数)

column-count(栏目列数): number(整数) || auto(取计算机值)

　　3、column-rule(栏目间隔线)

column-rule(栏目间隔线): number(数字) || style(类型) || color(颜色)

　　4、column-span(横跨栏目)

column-span(横跨栏目): none(不跨越任何列) || all(跨越所有列)

　　5、column-gap(栏目距离)

column-gap：normal(值为1em) || number(由浮点数字和单位标识符组成的长度值。不可为负值)

　　二、column的兼容

　　1、column-width(栏目宽度)

      

　　(1)兼容情况

　　(2)兼容写法

/*Firefox*/
-moz-column-width(栏目宽度): number(数字) || auto(取计算机值)
/*Webkit*/
-Webkit-column-width(栏目宽度): number(数字) || auto(取计算机值)
/*W3C*/
column-width(栏目宽度): number(数字) || auto(取计算机值)

 

　　2、column-count(栏目列数)

　　(1)兼容情况

　　(2)兼容写法

/*Firefox*/
-moz-column-count(栏目列数): number(数字) || auto(取计算机值)
/*Webkit*/
-Webkit-column-count(栏目列数): number(数字) || auto(取计算机值)
/*W3C*/
column-count(栏目列数): number(数字) || auto(取计算机值)

　　3、column-rule(栏目间隔线)

　　(1)兼容情况

　　(2)兼容写法

/*Firefox*/
-moz-column-rule(栏目间隔线): number(数字) || style(类型) || color(颜色)
/*Webkit*/
-Webkit-column-rule(栏目间隔线): number(数字) || style(类型) || color(颜色)
/*W3C*/
column-column-rule(栏目间隔线): number(数字) || style(类型) || color(颜色)

　　4、column-span(横跨栏目)

　　(1)兼容情况

　　(2)兼容写法

/*Webkit*/
-Webkit-column-span(横跨栏目): none(不跨越任何列) || all(跨越所有列)
/*W3C*/
column-column-span(横跨栏目): none(不跨越任何列) || all(跨越所有列)

　　5、column-gap(栏目距离)

　　(1)兼容情况

　　(2)兼容写法

/*Firefox*/
-moz-column-gap：normal(值为1em) || number(由浮点数字和单位标识符组成的长度值。不可为负值)
/*Webkit*/
-Webkit-column-gap：normal(值为1em) || number(由浮点数字和单位标识符组成的长度值。不可为负值)
/*W3C*/
column-column-gap：normal(值为1em) || number(由浮点数字和单位标识符组成的长度值。不可为负值)

　　三、column的实例

　　CSS代码：

body,p{margin:0;}
.box{width:900px;margin:0 auto;-webkit-column-width:30px;-webkit-column-count:3;-webkit-column-gap:40px;-webkit-column-rule:2px solid #000; }
.box p{font-size:14px;color:#666;line-height:30px; text-indent:2em;}
/*
其中-webkit-column-count(栏目列数)和-webkit-column-width(栏目宽度)同时出现的时候，-webkit-column-width(栏目宽度)将会失效。
只有在没有-webkit-column-count(栏目列数)的时候，-webkit-column-width(栏目宽度)才会起作用，并且根据-webkit-column-width(栏目宽度)
来决定栏目的数目。
*/

　　HTML代码：

<div class="box">
     <p>梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站</p>
     <p>梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站</p>
     <p>梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站</p>
     <p>梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站</p>
     <p>梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站</p>
<p>梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站</p>
</div>

　　预览效果：

　　以上就是CSS3之栏目column的介绍，有了这个属性，我们在编写三栏的时候，可以不用三个div+float了，直接用CSS3之栏目column就可以达到三栏的效果了。所以大家赶紧掌握CSS3之栏目column吧。