對(duì)列布局columns的理解

陸斌發(fā)布于2019-08-30 15:44 / 1736人閱讀

摘要：目錄概念寫(xiě)法兼容性概念列布局。有一個(gè)參數(shù)，并要求這個(gè)對(duì)象參數(shù)有一個(gè)名為類型為的屬性。用長(zhǎng)度值來(lái)定義列與列之間的間隙。適用于除浮動(dòng)和絕對(duì)定位之外的塊級(jí)元素取值不跨列橫跨所有列設(shè)置元素所有列的高度是否統(tǒng)一。所有列的高度以其中最高的一列統(tǒng)一。

【01】多列屬性columns

zyx456：這個(gè)屬性，在瀏覽器的修改中，不會(huì)生效的。只有刷新頁(yè)面才會(huì)有效果。

1 概念

2 寫(xiě)法

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，可以讓文本表現(xiàn)為一個(gè)仿報(bào)紙式的多欄結(jié)構(gòu)。

寫(xiě)法

//css

p   {
    display:inline-block;
    width: 600px;
    columns:30px 3;
}

//html

TypeScript的核心原則之一是對(duì)值所具有的結(jié)構(gòu)進(jìn)行類型檢查。 它有時(shí)被稱做"鴨式辨型法"或"結(jié)構(gòu)性子類型化"。 在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。類型檢查器會(huì)查看printLabel的調(diào)用。 printLabel有一個(gè)參數(shù)，并要求這個(gè)對(duì)象參數(shù)有一個(gè)名為label類型為string的屬性。 需要注意的是，我們傳入的對(duì)象參數(shù)實(shí)際上會(huì)包含很多屬性，但是編譯器只會(huì)檢查那些必需的屬性是否存在，并且其類型是否匹配。

columns:column-width column-count

復(fù)合屬性。

默認(rèn)值：看每個(gè)獨(dú)立屬性。

設(shè)置元素的列數(shù)和每列的寬度。

對(duì)應(yīng)的JS特性為columns。

適用于：除table外的非替換塊級(jí)元素, table cells, inline-block元素。

繼承性：無(wú)

column-width

設(shè)置元素每列的寬度。

column-count

設(shè)置元素的列數(shù)。

column-count:| auto

設(shè)置元素的列數(shù)。

默認(rèn)值：auto

：

用整數(shù)值來(lái)定義列數(shù)。不允許負(fù)值。

auto：

根據(jù)column-width自行分配寬度。

column-width: | auto

設(shè)置元素每列的寬度。

默認(rèn)值：auto

：

用長(zhǎng)度值來(lái)定義列寬。不允許負(fù)值。

auto：

根據(jù)column-count自行分配寬度。

column-gap: | normal

默認(rèn)值：normal

設(shè)置元素的列與列之間的間隙。

：

用長(zhǎng)度值來(lái)定義列與列之間的間隙。不允許負(fù)值

normal：

與font-size大小相同。假設(shè)該元素的font-size為16px，則normal值為16px，類推。

column-rule

復(fù)合屬性。

設(shè)置元素的列與列之間的邊框。

column-rule：<" column-rule-width||column-rule-style||column-rule-color ">

默認(rèn)值：看每個(gè)獨(dú)立屬性。

column-rule:10px solid #090;

column-rule并不會(huì)占據(jù)空間位置，看下面的例子：

p {column-rule:50px solid yellow;}

效果圖：

column-rule-width

| thin | medium | thick

設(shè)置元素的列與列之間的邊框厚度。

默認(rèn)值：medium

：

用長(zhǎng)度值來(lái)定義邊框的厚度。不允許負(fù)值

medium：

定義默認(rèn)厚度的邊框。

thin：

定義比默認(rèn)厚度細(xì)的邊框。

thick：

定義比默認(rèn)厚度粗的邊框。

column-rule-style

設(shè)置元素的列與列之間的邊框樣式。

默認(rèn)值：none

取值：

none：

無(wú)輪廓。<" column-rule-color與<" column-rule-width將被忽略。

hidden：

隱藏邊框。

dotted：

點(diǎn)狀輪廓。

dashed：

虛線輪廓。

solid：

實(shí)線輪廓

double：

雙線輪廓。兩條單線與其間隔的和等于指定的column-rule-width值。

groove：

3D凹槽輪廓。

ridge：

3D凸槽輪廓。

inset：

3D凹邊輪廓。

outset：

3D凸邊輪廓。

column-rule-color

設(shè)置元素的列與列之間的邊框顏色。

column-span：none | all

設(shè)置元素元素是否橫跨所有列。

適用于：除浮動(dòng)和絕對(duì)定位之外的塊級(jí)元素

取值：

none：

不跨列

all：

橫跨所有列

.tesp {column-count:3;column-width:100px;}

.test p {column-span:all;}

column-fill：auto | balance

設(shè)置元素所有列的高度是否統(tǒng)一。

默認(rèn)值：auto

取值：

auto：

列高度自適應(yīng)內(nèi)容。

balance：

所有列的高度以其中最高的一列統(tǒng)一。

column-break-before

設(shè)置元素之前是否斷行。

默認(rèn)值：auto適用于：塊級(jí)元素

取值：

auto：

既不強(qiáng)迫也不禁止在元素之前斷行并產(chǎn)生新列

always：

總是在元素之前斷行并產(chǎn)生新列

avoid：

避免在元素之前斷行并產(chǎn)生新列

.test {column-count:4;column-gap:20px;}

.test div {column-break-before: always;}

//html結(jié)構(gòu)

div.test>p+div+p

不管上一列有沒(méi)有填滿，我都另起一列

zyx456：就是說(shuō)這個(gè)元素會(huì)另起一列。

column-break-after

默認(rèn)值：auto

適用于：塊級(jí)元素

設(shè)置元素之前是否斷行。

取值：

auto：

既不強(qiáng)迫也不禁止在元素之后斷行并產(chǎn)生新列

always：

總是在元素之后斷行并產(chǎn)生新列

avoid：

避免在元素之后斷行并產(chǎn)生新列

.test {column-gap:20px;}
.test div {column-break-after:always;}

HTML結(jié)構(gòu)：

div.test>p+div+p

不管本列有沒(méi)有填滿，后面新建一列

column-break-inside

設(shè)置元素內(nèi)部是否斷行。

column-break-inside：auto | avoid | avoid-page | avoid-column

默認(rèn)值：auto

適用于：塊級(jí)元素

取值：

auto：

既不強(qiáng)迫也不禁止在元素內(nèi)部斷行并產(chǎn)生新列

avoid：

避免在元素內(nèi)部斷行并產(chǎn)生新列

兼容性：

加前綴-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的瀏覽器確實(shí)具有對(duì)非標(biāo)準(zhǔn)-webkit-column-break- 屬性的等效支持，以實(shí)現(xiàn)相同的結(jié)果（但只有auto和always值）。 Firefox不支持break- ，但支持分頁(yè)（打印）上下文中的now-obsolute page-break- *屬性。

2部分支持是指不支持列填充 column-fill屬性。

3部分支持是指不支持屬性break-before，break-after和break-inside的avoid-column，column和avoid（在列上下文中）值。