CSS3之栏目column

落日映苍穹つ 2022-09-17 05:25 270阅读 0赞

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)兼容情况*

![梦龙小站][SouthEast]

*(2)兼容写法*

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

**2、column-count(栏目列数)**

*(1)兼容情况*

![梦龙小站][SouthEast 1]

*(2)兼容写法*

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

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

*(1)兼容情况*

![梦龙小站][SouthEast 2]

*(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)兼容情况*

![梦龙小站][SouthEast 3]

*(2)兼容写法*

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

**5、column-gap(栏目距离)**

*(1)兼容情况*

![梦龙小站][SouthEast 4]

*(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">
 梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站
 梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站
 梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站
 梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站
 梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站
 梦龙小站梦龙小站梦龙小站梦龙小站梦龙梦龙小站
 </div>

***预览效果：***

![梦龙小站][SouthEast 5]

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

[SouthEast]: /images/20220828/dffc3c77e8f7463c9c10128b92e3fab9.png
[SouthEast 1]: /images/20220828/4551e0912df24850b8ae2309996d6513.png
[SouthEast 2]: /images/20220828/2af42701dbbf40bdac84b3313b4b242e.png
[SouthEast 3]: /images/20220828/fd84d8737db1473fac5146e7342e6654.png
[SouthEast 4]: /images/20220828/e714a8b44fb8415eb289f1b12d5d0a46.png
[SouthEast 5]: /images/20220828/e212e9f18b044bd2ba9e487d0f6f5b56.png