第5章你一直期待的多

第5章你一直期待的多列布局在我们经常阅读的报纸或杂志中，通常一个版面会分成多个列进行排版，传统的表格布局或浮动布局总会遇到错位问题，并且非常不灵活。CSS3提供的多列布局，使得这种排版有了新的解决方案。5.1多列布局基础CSS3提供了新的多列布局，包括以下几个方面：定义列数定义列宽定义列与列之间的间距定义列与列之间的间隔线定义栏目跨列5.1.1多列属性columns CSS3新增的columns属性，用于快速定义多列的列数目和每列的宽度。1.参数说明

columns:<column-width>||<column-count>;<column-width>：定义每列的宽度；<column-count>：定义多列的列数。 在实际布局的时候，所定义的多列的列数是最大列数。当外围宽度不足时，多列的列数会适当减少，而每列的宽度会自适应宽度，填满整个范围区域。5.1.1多列属性columns2.示例介绍

/*设计为3列，每列宽度200px*/ -webkit-columns:200px3; columns:200px3;如果缩小浏览器窗体的宽度，则文章会变成2列或者1列，每列的高度尽可能一致，而每列的宽度会自适应分配，不一定是200px。5.1.2列宽属性column-width CSS3新增的column-width属性，用于定义多列布局中每列的宽度。1.参数说明

column-width:auto|<length>;auto：列的宽度由浏览器决定；<length>：直接指定列的宽度，由浮点数和单位标识符组成的长度值，不可以为负值。5.1.2列宽属性column-width2.示例介绍

/*每列宽度200px*/

-webkit-column-width:200px;

-moz-column-width:200px;

column-width:200px;

当窗口的大小改变时，列数会及时调整，列数不固定。5.1.3列数属性column-count CSS3新增的column-count属性，用于定义多列布局中的列数目。1.参数说明

column-count:auto|<number>;auto：列的数目由其他属性决定，如column-width；<number>：直接指定列的数目，取值为大于0的整数，决定了多列的最大列数。5.1.3列数属性column-count2.示例介绍

/*指定列的数目*/ -webkit-column-count:3;

-moz-column-count:3;

column-count:3;

当窗口的大小改变时，列宽会及时调整，列数固定不变。5.1.4列间距属性column-gap CSS3新增的column-gap属性，用于定义多列布局中列与列之间的距离。1.参数说明

column-gap:normal|<length>;normal：默认值，由浏览器默认的列间距，一般是1em；<length>：指定列与列之间的距离，有浮点数字和单位标识符组成，不可为负值。5.1.4列间距属性column-gap2.示例介绍

/*指定列间距为3em*/

-webkit-column-gap:3em; -moz-column-gap:3em; column-gap:3em;

列与列之间的距离增加了很多，变得较为宽松了。

5.1.5定义列分隔线 CSS3新增的column-rule属性，在多列布局中，用于定义列与列之间的分隔线。1.参数说明

column-rule:[column-rule-width]||[column-rule-style]||[column-rule-color];2.派生的子属性<column-rule-width>：定义分隔线的宽度；<column-rule-style>：定义分隔线的样式风格；<column-rule-color>：定义分隔线的颜色。5.1.5定义列分隔线3.示例介绍

/*指定列间距为3em*/

-webkit-column-rule:1pxsolid#666; -moz-column-rule:1pxsolid#666; column-rule:1pxsolid#666;5.1.6定义横跨所有列 CSS3新增的column-span属性，在多列布局中，用于定义元素跨列显示。1.参数说明

column-span:1|all;1：默认值，元素在一列中显示；all：元素横跨所有列显示。5.1.6定义横跨所有列2.示例介绍

/*设置横跨所有列显示*/

-webkit-column-span:all; column-span:all;5.2实验室：模仿杂志的多列版式案例简介一个简易的仿杂志效果的页面。页面版式分3列布局标题横跨所有列显示；文章的开篇内容的第一个字设置较大内容是图文并茂，主要是仿杂志效果。5.3小结本章主要讲解了CSS3多列布