位置:首页 > 软件操作教程 > 编程开发 > CSS > 问题详情

CSS3 多列布局属性

提问人:刘团圆发布时间:2020-11-19

1.column-count

    column-count属性规定元素应该被划分的列数。

2.column-gap

    column-gap属性规定列之间的间隔。

    为之前的实例添加此属性,代码如下:

    column-gap: 40px;

3.column-rule-style

    column-ru!e-style属性规定列之间的样式规则,它类似于border-style属性,其属性的值可以是以下几种:

    •none:定义没有规则。

    •hidden:定义隐藏规则。

    •dotted: 定义点状规则。

    •dashed:定义虚线规则。

    •solid:定义实线规则。

    •double:定义双线规则。

    •groove:定义3D graoved规则,该效果取决于宽度和颜色值。

    •ridge:定义3D ridged规则,该效果取决于宽度和颜色值。

    •inset:定义3D inset规则,该效果取决于宽度和颜色值。

    •outset:定义3D outset规则,该效果取决于宽度和颜色值。

4.column-rule-width

    column-rule-width属性规定列之间的宽度规则,它类似于border-width属性,其属性的值可以使以下几种:

    •thin:定义纤细规则。

    •medium:定义中等规则。

    •thick:定义宽厚规则。

    •length:规定规则的宽度。

5.column一rulo-color

    column-rule-color属性规定列之间的颜色规则,它类似于border-color属性。 

    下面利用上述三个属性添加列与列的分割线,代码如下:

    column-rule-color: red;

    column-rule-width: 5 px;

    column-rule-style: dotted;

6.column-rule

    column-ruie是一个简写属性,用于设置所有column-rule-*属性。column-rule属性设置列之间宽度、样式和颜色规则,类似于border属性。

7.column-span

    column-span属性规定元素应横跨多少列,其值可以是以下两种:

    •1:元素应横跨一列。

    •all:元素应横跨所有列。

8.column-width

    column-width属性规定列的宽度,其属性的值可以是以下两种:

    •auto:由浏览器决定列宽。

    •length:规定列的宽度。

9.columns

    columns属性是一个简写属性,用于设置列宽和列数,语法如下:

    columns: column-width column-count:

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部