13.CSS笔记：多列（多栏）属性

本系列内容由ZouStrong整理收录

整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com

CSS3中新增的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充

一. 多列（multi-column）

1. column-width属性（CSS3新增）

• 作用：指定元素的列宽
  
• 默认值：auto
  
• 适用于：块级元素，行内块级元素，td元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：auto、所有长度值

示例：

column-width:100px;

2. column-count属性（CSS3新增）

• 作用：指定元素的列数
  
• 默认值：auto
  
• 适用于：块级元素，行内块级元素，td元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：auto、正整数

示例：

column-count:2;

3. columns属性（CSS3新增）

• 作用：指定元素的列数和列宽
  
• 默认值：auto
  
• 适用于：块级元素，行内块级元素，td元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：看独立属性

示例：

columns:2 100px;

CSS3规范里描述的是，各列的高度是均衡的，浏览器会自动调整每列里填充多少文本、均分文本，来使各列的高度保持均衡一致，因此可用于实现瀑布流布局

然而，有时候，我们需要设定列的最大高度，这个时候，文本内容会从第一列开始填充，然后第二列，第三列，也许以后的列会填不满，也许会溢出。所以，当对多列布局设定了height或max-height属性值后，列会伸长到指定高度——无论内容有多少，够不够或超不超

4. column-gap属性（CSS3新增）

• 作用：指定元素列之间的间隙
  
• 默认值：normal
  
• 适用于：定义了多列的元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：normal、所有长度值

normal值表示与font-size大小相同

columns:2 100px;

5. column-rule-width属性（CSS3新增）

• 作用：指定元素列与列之间的边框宽度
  
• 默认值：medium
  
• 适用于：定义了多列的元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有长度值、thin、medium、thick

6. column-rule-style属性（CSS3新增）

• 作用：指定元素列与列之间的边框样式
  
• 默认值：none
  
• 适用于：定义了多列的元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：none、dotted、dashed、solid.....

7. column-rule-color属性（CSS3新增）

• 作用：指定元素列与列之间的边框颜色
  
• 默认值：字体颜色
  
• 适用于：定义了多列的元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：所有颜色值

8. column-rule属性（CSS3新增）

• 作用：指定元素列与列之间的边框
  
• 默认值：看每个独立属性
  
• 适用于：定义了多列的元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：看每个独立属性

示例：

 -webkit-column-rule:10px solid #090;
 column-rule:10px solid #090;

注：不同于元素边框，列边框的出现不影响布局

9. column-fill属性（CSS3新增）

• 作用：指定元素所有列的高度是否统一
  
• 默认值：auto
  
• 适用于：定义了多列的元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：auto（列高度自适应内容）、balance（列的高度以其中最高的一列统一）

示例：

 -webkit-column-fill: balance;

10. column-span属性（CSS3新增）

• 作用：指定元素是否横跨所有列
  
• 默认值：none
  
• 适用于：除浮动和绝对定位之外的块级元素
  
• 继承性：无
  
• 动画性：有
  
• 取值：none（不跨列）、all（横跨所有列）

示例：

 -webkit-column-span: all;
 column-span: all;

11. column-break-before属性（CSS3新增）

• 作用：指定元素之前是否换行
  
• 默认值：auto
  
• 适用于：块级元素
  
• 继承性：无
  
• 动画性：无
  
• 取值：auto、always、avoid

auto：既不强迫也不禁止在元素之前断行并产生新列

always：总是在元素之前断行并产生新列

avoid：避免在元素之前断行并产生新列

12. column-break-after属性（CSS3新增）

• 作用：指定元素之后是否换行
  
• 默认值：auto
  
• 适用于：块级元素
  
• 继承性：无
  
• 动画性：无
  
• 取值：auto、always、avoid

13. column-break-inside属性（CSS3新增）

• 作用：指定元素内部是否换行
  
• 默认值：auto
  
• 适用于：块级元素
  
• 继承性：无
  
• 动画性：无
  
• 取值：auto、avoid