网页设计与制作（HTML+CSS+JS）-3期（KC003） CSS3多列布局 1CSS3多列布局.pptx

1 CSS3多列布局 Part ◎ 认识columns多列布局 ◎ columns的其他属性 认识columns多列布局 基本语法 : column-width设置对象每列的宽度 column-count设置对象的列数 columns是多列布局特性的基本属性，该属性可以同时定义每列的宽度和列数。 columns：column-width | column-count ; 作用：columns适合应用在网页中需要显示大量文本时，建议分列，方便阅读。 认识columns多列布局 .test1 { width:660px; border:1px solid #333333; padding: 10px; -moz-columns:200px 3; -webkit-columns:200px 3; columns:200px 3; } 认识columns多列布局 举例演示 多列布局columns的使用。 认识columns多列布局 使用columns属性 使用 div 标签 columns的其他属性 属性名称 语法 含义 column-width 语法：column-width：length | auto; 设置或检索对象每列的宽度 。 举例：column-width:300px; column-count 语法：column-count：integer | auto; 设置或检索对象的列数。 举例：column-count:3; column-gap 语法：column-gap：length | normal; 设置或检索对象的列与列之间的间隙。 举例：column-gap:normal; /*默认值*/ column-gap:40px; column-rule 语法：column-rule：[ column-rule-width ] | [ column-rule-style ] | [ column-rule-color ]; 设置或检索对象的列与列之间的边框。复合属性，相当于border属性。 举例：column-rule:1px solid #999; column-span 语法：column-span：none | all; 设置或检索对象元素是否横跨所有列。 举例：column-span:all; columns的其他属性 column-gap 语法： column-gap：length | normal; 设置或检索对象的列与列之间的间隙 columns的其他属性 column-rule 语法： column-rule：[ column-rule-width ] | [ column-rule-style ] | [ column-rule-color ]; 设置或检索对象的列与列之间的边框 columns的其他属性 column-span 语法： column-span：none | all ; 设置或检索对象元素是否横跨所有列 columns的其他属性 属性名称 属性名称 column-width column-fill column-count column-break-before column-gap column-break-after column-rule olumn-break-inside column-span columns的属性 columns的其他属性 举例演示 多列布局columns举例。