笔记：CSS多列

columns

解释：设置或检索对象的列数和每列的宽度，复合属性
语法：columns：column-width || column-count;
column-width：每列的宽度
column-count：列数
注：两个参数可以同时写，也可以只写其中一个，当写了宽和列数的时候，并且 （列数宽 < 容器总宽），它优先考虑列数，反之，（列数宽 > 容器总宽），优先考虑宽度，看能放下多少列，当不写列，只写宽的时候，就会均匀以宽的值分布在容器中

1.column-width
解释：设置或检索对象每列的宽度
语法：column-width：length / auto;
length：用长度值来定义列宽，不允许负值
auto：根据列数自定分配宽度
2.column-count
解释：设置或检索对象的列数
语法：column-count：integer / auto;
integer：用整数值来定义列数，不允许负数
auto：根据列宽自定分配宽度
3.column-gap
解释：设置或检索对象的列与列之间的间隙
语法：column-gap：length / normal;
length：用长度值来定义列与列之间的间隙，不允许负值
normal：与字体大小相同
4.column-rule
解释：设置或检索对象的列与列之间的边框，复合属性
语法：column-rule：column-rule-width || column-rule-style || column-rule-color;
参数说明：设置或检索列与列之间的边框厚度、样式和颜色

(1).column-rule-width
解释：设置或检索列与列之间的边框厚度
语法：column-rule-width：length / thin / medium / thick;
length：用长度值来定义边框的厚度，不允许负值
medium：定义默认厚度的边框
thin：定义比默认厚度细的边框
thick：定义比默认厚度粗的边框

(2).column-rule-style
解释：设置或检索对象的列与列之间的边框样式
语法：column-rule-style：none / hidden / dotted / dashed / solid / double / groove / ridge / inset / outset;
none：无轮廓
hidden：隐藏边框
dotted：点状轮廓
dashed：虚线轮廓
solid：实线轮廓，默认值
double：双线轮廓
groove：3D凹槽轮廓
ridge：3D凸槽轮廓
inset：3D凹边轮廓
outset：3D凸边轮廓

(3).column-rule-color
解释：设置或检索对象的列与列之间的边框的颜色
语法：column-rule-color：color;

5.column-span
解释：设置或检索对象元素是否横跨所有列
语法：column-span：none / all;
none：不跨列
all：横跨所有列
6.column-fill
解释：设置或检索对象所有列的高度是否统一
语法：column-fill：auto / balance;
auto：列高度自适应内容
balance：所有列的高度以其中最高的一列统一
7.column-break
(1).column-break-before
解释：设置或检索对象之前是否断行
语法：column-break-before：auto / always / avoid;
auto：即不强迫也不禁止在元素之前断行并产生新列
always：总是在元素之前断行并产生新列
avoid：避免在元素之前断行并产生新列

(2).column-break-after
解释：设置或检索对象之后是否断行
语法：column-break-after：auto / always / avoid;
auto：即不强迫也不禁止在元素之后断行并产生新列
always：总是在元素之后断行并产生新列
avoid：避免在元素之后断行并产生新列

(3).column-break-inside
解释：设置或检索对象内部是否断行
语法：column-break-inside：auto / avoid;
auto：即不强迫也不禁止在元素内部断行并产生新列
avoid：避免在元素内部断行并产生新列