CSS3 多列布局属性
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:
点击加载更多评论>>