多列布局属性.pptxVIP

主讲人： 刘建超 多列布局属性 多列布局属性 多列类布局属性的优点 CSS3新增多列布局属性 1. CSS3的多列布局属性优点 在之前的CSS样式中， 如果想实现如报纸、杂志效果的多列布局，步骤非常繁琐。 CSS3新增的columns等多列布局可以自动将内容按指定的列数排列。 2. CSS3的多列布局属性 属性 说明 columns 检索对象的列数或每列的宽度 column-width 设置或检索对象单列显示宽度 column-count 设置或检索对象的显示列数 column-gap 设置或检索对象列与列之间的间隙 column-rule 设置或检索对象的列与列之间的边框的宽度、样式和颜色 column-fill 设置或检索对象所有列的高度是否统一 2. 1 columns属性 语法：columns：[column-width] | [column-count] 取值： column-width：定义每列宽度 column-count：定义列数 说明：设置或检索对象的列数和每列宽度 2. 2 column-width属性 语法：column-width：length | auto 取值： length：由浮点数字和单位标示组成的长度值 auto：根据浏览器值自动设置 说明：设置或检索对象的单列显示宽度 2. 3 column-count属性 语法：column-count：i