css3笔记05--多列布局

CSS3–多列布局

columns

用于快速定义多列的列数目和每列的宽度。基于webkit的替代私有属性是-webkit-columns，gecko内核的浏览器不支持

1
2
3

columns：width|count
width：每列的宽度
count：多列的列数

实际布局的时候，定义的多列的列数是最大列数，当外围宽度不足的时候，多列的列数会适当减少，而每列的宽度会自适应宽度，填满整个范围。
例如：

1 2	-webkit-columns： 200px 3； columns：200px 3；

每列的高度尽可能一致。如果缩小浏览窗的宽度，则文章会编程2列或一列，每列的高度尽可能一直，而每列的宽度会自适应分配，不一定是200px。

column-width

用来定义多列布局中每列的宽度，基于webkit内核的替代私有属性是-webkit-column-width，基于gecko内核的替代私有属性是-moz-column-width。

1
2
3

column-width：auto|length
auto：列的宽度由浏览器决定
length：直接指定列的宽度。

例如：

1
2
3

-webkit-column-width：200px；
-moz-column-width：200px；
column-width：200px；

当浏览窗口改变时，列数会及时调整，列数不固定

colum-count

用来定义多列布局中的列数目。基于webkit内核的是-webkit-column-count，基于gecko的是-moz-column-count

column-count：auto|number
auto：列的数目由其他属性决定，列入column-width
number：直接指定列的数目，决定了列的最大列数

-webkit-column-count：3；
-moz-column-count：3；
column-count：3；

当设置了列的数目的时候，当窗口大小改变的时候，列宽会及时调整，列数固定不变。

column-gap

用于定于多列布局中列与列之间的距离。

column-gap：normal|length
normal：默认值，由浏览器默认的列间距，一般是1em
length:指定列与列之间的距离。

-webkit-column-gap：3em；
-moz-column-gap：3em；
column-gap：3em；

column-rule

用于定义列与列之间的分割线。

column-rule：column-rule-width||column-rule-style||column-rule-color；
column-rule-width：定义分割线的宽度
column-rule-style：定义分割线的样式风格（跟border-style相同）
column-rule-color：颜色

派生子属性：

column-rule-width：定义分割线的宽度
column-rule-style：定义分割线的样式风格（跟border-style相同）
column-rule-color：颜色

派生子属性的用法跟border属性及其子属性用法相同。

1
2
3

-webkit-column-rule：1px solid #666；
-moz-column-rule：1px solid #666；
column-rule：1px solid #666；

也可以用派生子属性来定义。

column-span

在多列布局中，用于定义元素跨列显示。gecko内核的浏览器不支持该属性

column-span：1|all
1：默认值，元素在一列中显示
all：元素跨所有列显示

-webkit-column-span：all；
column-span：all；

一般这种方法用来表示标题，让标题能够跨所有列居中表示

该属性应该设置在父容器中，一般是设置在body元素中，这样的话，在body标签内的所有标签都是呈现的三列布局表示。