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