对列布局columns的理解

【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

<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（在列上下文中）值。