【01】多列属性columns
zyx456：这个属性，在浏览器的修改中，不会生效的。只有刷新页面才会有效果。
目录：
1 概念
2 写法
3 columns:column-width column-count
4 column-count
5 column-width
6 column-gap
7 column-rule
7.1 column-rule-width
7.2 column-rule-style
7.3 column-rule-color
8 column-span
9 column-fill
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
TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做”鸭式辨型法”或”结构性子类型化”。 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。类型检查器会查看printLabel的调用。 printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配。
columns:column-width column-count
复合属性。
默认值：看每个独立属性。
设置元素的列数和每列的宽度。
对应的JS特性为columns。
适用于：除table外的非替换块级元素, table cells, inline-block元素。
继承性：无
column-width
设置元素每列的宽度。
column-count
设置元素的列数。
column-count:| auto
设置元素的列数。
默认值：auto
：
用整数值来定义列数。不允许负值。
auto：
根据column-width自行分配宽度。
column-width: | auto
设置元素每列的宽度。
默认值：auto
：
用长度值来定义列宽。不允许负值。
auto：
根据column-count自行分配宽度。
column-gap: | normal
默认值：normal
设置元素的列与列之间的间隙。
：
用长度值来定义列与列之间的间隙。不允许负值
normal：
与font-size大小相同。假设该元素的font-size为16px，则normal值为16px，类推。
column-rule
复合属性。
设置元素的列与列之间的边框。
column-rule：
默认值：看每个独立属性。
column-rule:10px solid #090;
column-rule并不会占据空间位置，看下面的例子：
p {column-rule:50px solid yellow;}
效果图：
column-rule-width
| thin | medium | thick
设置元素的列与列之间的边框厚度。
默认值：medium
：
用长度值来定义边框的厚度。不允许负值
medium：
定义默认厚度的边框。
thin：
定义比默认厚度细的边框。
thick：
定义比默认厚度粗的边框。
column-rule-style
设置元素的列与列之间的边框样式。
column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
默认值：none
取值：
none：
无轮廓。
hidden：
隐藏边框。
dotted：
点状轮廓。
dashed：
虚线轮廓。
solid：
实线轮廓
double：
双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值。
groove：
3D凹槽轮廓。
ridge：
3D凸槽轮廓。
inset：
3D凹边轮廓。
outset：
3D凸边轮廓。
column-rule-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
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
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(在列上下文中)值。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/176716.html原文链接：https://javaforall.net
