對列布局columns的理解

Yangyang 發(fā)布于2019-08-26 10:41 / 3297人閱讀

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

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

寫法

//css

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

//html

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

columns:column-width column-count

復合屬性。

默認值：看每個獨立屬性。

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

對應的JS特性為columns。

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

繼承性：無

column-width

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

column-count

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

column-count:| auto

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

默認值：auto

：

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

auto：

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

column-width: | auto

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

默認值：auto

：

用長度值來定義列寬。不允許負值。

auto：

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

column-gap: | normal

默認值：normal

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

：

用長度值來定義列與列之間的間隙。不允許負值

normal：

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

column-rule

復合屬性。

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

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

默認值：看每個獨立屬性。

column-rule:10px solid #090;

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

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

效果圖：

column-rule-width

| thin | medium | thick

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

默認值：medium

：

用長度值來定義邊框的厚度。不允許負值

medium：

定義默認厚度的邊框。

thin：

定義比默認厚度細的邊框。

thick：

定義比默認厚度粗的邊框。

column-rule-style

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

默認值：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

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

column-span：none | all

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

適用于：除浮動和絕對定位之外的塊級元素

取值：

none：

不跨列

all：

橫跨所有列

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

.test p {column-span:all;}

column-fill：auto | balance

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

默認值：auto

取值：

auto：

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

balance：

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

column-break-before

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

默認值：auto適用于：塊級元素

取值：

auto：

既不強迫也不禁止在元素之前斷行并產(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

不管上一列有沒有填滿，我都另起一列

zyx456：就是說這個元素會另起一列。

column-break-after

默認值：auto

適用于：塊級元素

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

取值：

auto：

既不強迫也不禁止在元素之后斷行并產(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

不管本列有沒有填滿，后面新建一列

column-break-inside

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

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

默認值：auto

適用于：塊級元素

取值：

auto：

既不強迫也不禁止在元素內(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的瀏覽器確實具有對非標準-webkit-column-break- 屬性的等效支持，以實現(xiàn)相同的結(jié)果（但只有auto和always值）。 Firefox不支持break- ，但支持分頁（打印）上下文中的now-obsolute page-break- *屬性。

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

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