一、多列布局——columns属性
CSS3新增了columns属性,该属性用于快速定义多列布局的列数目和每列的宽度。语法格式如下:
columns:属性值;
columns属性的属性值介绍如下。
1.
2.
二、列宽度——column-width属性
该属性可以定义多列布局中每列的宽度,可以单独使用,也可以和其他多列布局属性组合使用。语法格式如下:
column-width:auto、
三、列数——column-count属性
该属性可以设置多列布局的列数,不需要通过列宽度自动调整列数。语法格式如下:
column-count:auto、
四、列间距——column-gap属性
该属性可以设置列与列之间的间距,从而更好地控制多列布局中的内容和版式。语法格式如下:
column-gap:normal、
五、列分栏线——column-rule属性
该属性可以设置多列布局的边框,用于区分不同的列。语法格式如下:
column-rule:[column-rule-width]、[column-rule-style]、[column-rule-color];分别表示设置分割线的宽度、设置分割线的样式、设置分割线的颜色
六、横跨所有列——column-span属性
该属性用于定义元素跨列显示。语法格式如下:
column-span:1、all;分别表示元素在一列中显示、元素横跨所有列显示。