一、多列布局的属性
多列布局的核心属性:
columns:集成column-width和column-count两个属性,用于实现元素多列布局效果。
column-width:定义每列列宽度
column-count:定义分列列数
column-gap:定义列间距
column-rule:定义列边框
column-span:定义多列布局中,子元素跨列效果
column-fill:控制每列的列高效果
二、多列布局基本属性介绍
1、多列布局复合属性
columns是一个复合属性,列宽和列数,可以同时定义多列的列数和每列的列宽。
语法:columns:||
参数说明:
column-width:定义多列中每列的宽度
column-count:定义多列中的列数
示例:
1html>
2
3
4
5
多列布局6
8 padding:0;
9 margin:0;
10 }
11 .wrapper{
12 width:40em;
13 margin-left: auto;
14 margin-right: auto;
15 border:solid #ccc 1px;
16 padding:5px;
17 /*多列布局*/
18 columns:9em 4;
19 }
20 h1{
21 font-size:1.5em;
22 margin-bottom: 1em;
23 }
24 p{
25 margin-bottom: 1em;
26 text-indent: 2em;
27 line-height: 1.625;
28 font-size:.7em;
29 }
30
31
32
33
34
测试文本
35
网易科技讯....
36
微软能否拯救windows8
37
这个问。。。
38
不过,看起
39
设计融合。。
40
测试文本测试文本
41
测试文本测试文本
42
测试文本测试文本
43
44
45
2、多列布局列宽属性
多列布局列宽column-width属性类似于给列定义一个最小宽度。
语法:column-width:auto|
参数说明:
auto:默认值,如果值为auto或没有显示设置,元素多列的列宽将由其它属性来决定。
length:使用固定值来设置元素的列宽度,主要是由数值和长度单位组成,只能是正值。
3、多列布局列数属性
column-width属性主要用来给元素指定想要的列数和允许的最大列数。
语法:column-count:auto|
参数说明:
auto:默认值,表示元素只有一列
integer:正整数值,定义元素的列数,取值为大于零的整数。
列数=(容器宽度-间距)/列间距
浏览器对于小数的取舍正常情况下都是四舍五入,但这里对于列数的取值,是去余取整。
例如:列数=(40em-2em)/10em=38em/10em=3.8这里取得是3列。
如果元素显显式设置了列数,不管元素的宽度是多少或者间距多少,总是显示固定的列数。
4、多列布局列间距属性
column-gap只能设置列与列之间的间距。
语法:column-gap:normal|
参数说明:
normal:默认值,normal一般情况下相当于1em
length:由浮点数字和单位标识符组成的长度值,主要用来设置列与列之间的距离,不能为负值。
示例:
1.wrapper{
2 width:40em;
3 margin-left: auto;
4 margin-right: auto;
5 border:1px solid #ccc;
6 padding:5px;
7 -moz-column-count:4;
8 -webkit-column-count:4;
9 column-count:4;
10 -moz-column-gap:2em;
11 -webkit-column-gap:2em;
12 column-gap:2em;
13}
column-gap与column-width等参数之和大于多列元素总宽度时,会导致列被撑破,并将当前列数减1来显示,列宽自动调节到适当的列宽。
5、多列布局列边框样式属性
column-rule用来定义列与列之间的边框宽度、边框样式和边框颜色,类似于border属性。但column-rule不占用任何空间位置,在列与列之间改变其宽度不会改变任何列的位置。
语法:
column-rule:||
参数说明:
column-rule-width:定义边框的宽度,默认值medium,接受任意浮点数,不接受负值,可用关键词medium、thick、thin。
column-rule-style:定义列边框样式,默认值为none,可用关键词none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color:定义列边框的颜色,接受所有颜色的值。
多列列边框与列间距总结
column-gap类似于盒模型中的margin和padding属性,具有一定的空间位置,当其值过大时会撑破布局,浏览器会自动根据相关参数重新计算列数,知道容器无法容纳时,显示为一列为止。
column-rule类似于盒模型中的border属性,主要用来设置列边框的宽度、列边框的样式和列边框的颜色,并且column-rule不具有任何空间位置,同时在Z轴介于background和content之间,不会撑破容器。
6、多列布局列跨列属性
column-span主要用来定义一个分列元素中的子元素能跨列多少。
语法:column-span:none|all
参数说明:
none:默认值,不跨越任何列
all:表示元素跨越所有列,并定位在列的Z轴之上
7、多列布局列高度属性
column-fill用来定义多列中每一列的高度是否统一。
语法:column-fill:auto|balance
参数说明:
auto:默认值,各列的高度随其内容的变化自动变化
balance:各列的高度根据内容最多的一列高度进行统一