共计 3308 个字符，预计需要花费 9 分钟才能阅读完成。
【01】多列属性 columns
zyx456：这个属性，在浏览器的修改中，不会生效的。只有刷新页面才会有效果。
目录：
- 1 概念
- 2 写法
- 3 columns:column-width column-count
- 4 column-count:| auto
- 5 column-width: | auto
- 6 column-gap: | normal
- 7 column-rule
- 7.1 column-rule-width
- 7.2 column-rule-style
- 7.3 column-rule-color
- 8 column-span：none | all
- 9 column-fill：auto | balance
- 10 column-break-before
- 11 column-break-after
- 12 column-break-inside
- 13 兼容性：
概念
列布局。multi-column，可以让文本表现为一个仿报纸式的多栏结构。
写法
//css
p {
display:inline-block;
width: 600px;
columns:30px 3;
}//html
<p>TypeScript 的核心原则之一是对值所具有的结构进行类型检查。它有时被称做 "鸭式辨型法" 或 "结构性子类型化"。在 TypeScript 里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。类型检查器会查看 printLabel 的调用。printLabel 有一个参数，并要求这个对象参数有一个名为 label 类型为 string 的属性。需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。</p>
columns:column-width column-count
复合属性。
默认值：看每个独立属性。
设置元素的列数和每列的宽度。
对应的 JS 特性为 columns。
适用于：除 table 外的非替换块级元素, table cells, inline-block 元素。
继承性：无
column-width
设置元素每列的宽度。
column-count
设置元素的列数。
column-count:<integer>| auto
设置元素的列数。
默认值：auto
<integer>：
用整数值来定义列数。不允许负值。
auto：
根据 column-width 自行分配宽度。
column-width:<length> | auto
设置元素每列的宽度。
默认值：auto
<length>：
用长度值来定义列宽。不允许负值。
auto：
根据 column-count 自行分配宽度。
column-gap:<length> | normal
默认值：normal
设置元素的列与列之间的间隙。
<length>：
用长度值来定义列与列之间的间隙。不允许负值
normal：
与 font-size 大小相同。假设该元素的 font-size 为 16px，则 normal 值为 16px，类推。
column-rule
复合属性。
设置元素的列与列之间的边框。
column-rule：<‘ column-rule-width||column-rule-style||column-rule-color ‘>
默认值：看每个独立属性。
column-rule:10px solid #090;
column-rule 并不会占据空间位置，看下面的例子：
p {column-rule:50px solid yellow;}
效果图：
column-rule-width
<length> | thin | medium | thick
设置元素的列与列之间的边框厚度。
默认值：medium
<length>：
用长度值来定义边框的厚度。不允许负值
medium：
定义默认厚度的边框。
thin：
定义比默认厚度细的边框。
thick：
定义比默认厚度粗的边框。
column-rule-style
设置元素的列与列之间的边框样式。
column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
默认值：none
取值：
none：
无轮廓。<‘ column-rule-color 与 <‘ column-rule-width 将被忽略。
hidden：
隐藏边框。
dotted：
点状轮廓。
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的 column-rule-width 值。
groove：
3D 凹槽轮廓。
ridge：
3D 凸槽轮廓。
inset：
3D 凹边轮廓。
outset：
3D 凸边轮廓。
column-rule-color
<color>
设置元素的列与列之间的边框颜色。
column-span：none | all
设置元素元素是否横跨所有列。
适用于：除浮动和绝对定位之外的块级元素
取值：
none：
不跨列
all：
横跨所有列
.tesp {column-count:3;column-width:100px;}
.test p {column-span:all;}
column-fill：auto | balance
设置元素所有列的高度是否统一。
默认值：auto
取值：
auto：
列高度自适应内容。
balance：
所有列的高度以其中最高的一列统一。
column-break-before
设置元素之前是否断行。
column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
默认值：auto 适用于：块级元素
取值：
auto：
既不强迫也不禁止在元素之前断行并产生新列
always：
总是在元素之前断行并产生新列
avoid：
避免在元素之前断行并产生新列
.test {column-count:4;column-gap:20px;}
.test div {column-break-before: always;}
//html 结构
div.test>p+div+p
<div> 不管上一列有没有填满，我都另起一列 </div>
zyx456：就是说这个元素会另起一列。
column-break-after
auto | always | avoid | left | right | page | column | avoid-page | avoid-column
默认值：auto
适用于：块级元素
设置元素之前是否断行。
取值：
auto：
既不强迫也不禁止在元素之后断行并产生新列
always：
总是在元素之后断行并产生新列
avoid：
避免在元素之后断行并产生新列
.test {column-gap:20px;}
.test div {column-break-after:always;}HTML 结构：
div.test>p+div+p
<div> 不管本列有没有填满，后面新建一列 </div>
column-break-inside
设置元素内部是否断行。
column-break-inside：auto | avoid | avoid-page | avoid-column
默认值：auto
适用于：块级元素
取值：
auto：
既不强迫也不禁止在元素内部断行并产生新列
avoid：
避免在元素内部断行并产生新列
兼容性：
加前缀 -webkit-，-moz-
-moz-column-count:3; / Firefox /
-webkit-column-count:3; / Safari and Chrome /
column-count:3;
1 部分支持是指不支持 break-before，break-after 和 break-inside 属性。基于 WebKit 和 Blink 的浏览器确实具有对非标准 -webkit-column-break- 属性的等效支持，以实现相同的结果（但只有 auto 和 always 值）。Firefox 不支持 break- ，但支持分页（打印）上下文中的 now-obsolute page-break- * 属性。
2 部分支持是指不支持列填充 column-fill 属性。
3 部分支持是指不支持属性 break-before，break-after 和 break-inside 的 avoid-column，column 和 avoid（在列上下文中）值。
