CSS3布局之columns多列布局

2020-06-1569次阅读css模块

columns用来设置元素的列宽和列数。它是一个简写属性,可在单个方便的声明中设置 column-width 和 column-count 属性。与所有简写属性一样,任何省略的子值都将设置为其初始值。

相关属性:

1.column-width:<length> | auto 设置或检索对象每列的宽度 
如:-moz-column-width:200px;

2.column-count:<integer> | auto 设置或检索对象的列数
如:-webkit-column-count:3;

3.column-gap:<length> | normal 设置或检索对象的列与列之间的间隙
如:column-gap:normal;column-gap:40px;

4.column-rule:[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]设置或检索对象的列与列之间的边框。复合属性。相当于border属性
如:column-rule:10px solid #090;

5.column-span:none | all 设置或检索对象元素是否横跨所有列。
如:column-span:all;

6.column-fill:auto | balance 设置或检索对象所有列的高度是否统一。
auto:列高度自适应内容
balance:所有列的高度以其中最高的一列统一
如:column-fill:balance;

7.column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column 设置或检索对象之前是否断行。

auto:既不强迫也不禁止在元素之前断行并产生新列
always:总是在元素之前断行并产生新列
avoid:避免在元素之前断行并产生新列

8.column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column 设置或检索对象之后是否断行。

auto:既不强迫也不禁止在元素之后断行并产生新列
always:总是在元素之后断行并产生新列
avoid:避免在元素之后断行并产生新列

9.column-break-inside:auto | avoid | avoid-page | avoid-column 设置或检索对象内部是否断行。

auto:既不强迫也不禁止在元素内部断行并产生新列
avoid:避免在元素内部断行并产生新列

其实常用的也就前面5条。
 

上一篇: conic-gradient()圆锥形渐变实现背景图案  下一篇: CSS伪元素::marker选择列表项的标记框  

CSS3布局之columns多列布局相关文章