資訊專欄INFORMATION COLUMN
摘要：目錄概念寫法兼容性概念列布局。有一個參數(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
columns:column-width column-countTypeScript的核心原則之一是對值所具有的結(jié)構(gòu)進(jìn)行類型檢查。 它有時被稱做"鴨式辨型法"或"結(jié)構(gòu)性子類型化"。 在TypeScript里，接口的作用就是為這些類型命名和為你的代碼或第三方代碼定義契約。類型檢查器會查看printLabel的調(diào)用。 printLabel有一個參數(shù)，并要求這個對象參數(shù)有一個名為label類型為string的屬性。 需要注意的是，我們傳入的對象參數(shù)實際上會包含很多屬性，但是編譯器只會檢查那些必需的屬性是否存在，并且其類型是否匹配。
復(fù)合屬性。
默認(rèn)值：看每個獨立屬性。
設(shè)置元素的列數(shù)和每列的寬度。
對應(yīng)的JS特性為columns。
適用于：除table外的非替換塊級元素, table cells, inline-block元素。
繼承性：無
column-width
設(shè)置元素每列的寬度。
column-count
設(shè)置元素的列數(shù)。
column-count:設(shè)置元素的列數(shù)。
默認(rèn)值：auto
用整數(shù)值來定義列數(shù)。不允許負(fù)值。
auto：
根據(jù)column-width自行分配寬度。
column-width:設(shè)置元素每列的寬度。
默認(rèn)值：auto
用長度值來定義列寬。不允許負(fù)值。
auto：
根據(jù)column-count自行分配寬度。
column-gap:默認(rèn)值：normal
設(shè)置元素的列與列之間的間隙。
用長度值來定義列與列之間的間隙。不允許負(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)值：看每個獨立屬性。
column-rule:10px solid #090;
column-rule并不會占據(jù)空間位置，看下面的例子：
p {column-rule:50px solid yellow;}
效果圖：
column-rule-width設(shè)置元素的列與列之間的邊框厚度。
默認(rèn)值：medium
用長度值來定義邊框的厚度。不允許負(fù)值
medium：
定義默認(rèn)厚度的邊框。
thin：
定義比默認(rèn)厚度細(xì)的邊框。
thick：
定義比默認(rèn)厚度粗的邊框。
column-rule-style設(shè)置元素的列與列之間的邊框樣式。
column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
默認(rèn)值：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)一。
默認(rèn)值：auto
取值：
auto：
列高度自適應(yīng)內(nèi)容。
balance：
所有列的高度以其中最高的一列統(tǒng)一。
column-break-before設(shè)置元素之前是否斷行。
column-break-before：auto | always | avoid | left | right | page | column | avoid-page | avoid-column
默認(rèn)值：auto適用于：塊級元素
取值：
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
zyx456：就是說這個元素會另起一列。
column-break-afterauto | always | avoid | left | right | page | column | avoid-page | avoid-column
默認(rèn)值：auto
適用于：塊級元素
設(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
設(shè)置元素內(nèi)部是否斷行。
column-break-inside：auto | avoid | avoid-page | avoid-column
默認(rèn)值：auto
適用于：塊級元素
取值：
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的瀏覽器確實具有對非標(biāo)準(zhǔn)-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（在列上下文中）值。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116239.html
摘要：目錄概念寫法兼容性概念列布局。有一個參數(shù)，并要求這個對象參數(shù)有一個名為類型為的屬性。用長度值來定義列與列之間的間隙。適用于除浮動和絕對定位之外的塊級元素取值不跨列橫跨所有列設(shè)置元素所有列的高度是否統(tǒng)一。所有列的高度以其中最高的一列統(tǒng)一。 【01】多列屬性columns zyx456：這個屬性，在瀏覽器的修改中，不會生效的。只有刷新頁面才會有效果。 目錄： 1 概念 2 寫法 3 ...
瀑布流的布局自我感覺還是很吸引人的，最近又看到實現(xiàn)瀑布流這個做法，在這里記錄下，特別的，感覺flex布局實現(xiàn)瀑布流還是有點懵的樣子，不過現(xiàn)在就可以明白它的原理了 1.multi-column多列布局實現(xiàn)瀑布流 先簡單的講下multi-column相關(guān)的部分屬性 column-count設(shè)置列數(shù) column-gap設(shè)置列與列之間的間距 column-width設(shè)置每列的寬度 還要結(jié)合在子容器中...
瀑布流的布局自我感覺還是很吸引人的，最近又看到實現(xiàn)瀑布流這個做法，在這里記錄下，特別的，感覺flex布局實現(xiàn)瀑布流還是有點懵的樣子，不過現(xiàn)在就可以明白它的原理了 1.multi-column多列布局實現(xiàn)瀑布流 先簡單的講下multi-column相關(guān)的部分屬性 column-count設(shè)置列數(shù) column-gap設(shè)置列與列之間的間距 column-width設(shè)置每列的寬度 還要結(jié)合在子容器中...
摘要：網(wǎng)格是繼之后又一非常重要的布局方法。目前，瀏覽器的最新版本已經(jīng)開始支持它了。說在前面與的區(qū)別是一維的，是二維的。定義列隨后，我們需要對列進(jìn)行聲明。通過擴(kuò)展關(guān)鍵字，意味著從這個元素應(yīng)該開始的位置擴(kuò)展幾列。 CSS Grid (CSS網(wǎng)格) 是繼 Flexbox之后又一非常重要的布局方法。目前，Chrome Firefox Safari 瀏覽器的最新版本已經(jīng)開始支持它了。 本篇文章，我們通...
摘要：難道是因為這個組件自帶標(biāo)簽胡亂猜疑是解決不了問題的。為何稱之為勉強(qiáng)版，因為從上面的也看出來了。再看數(shù)組第二個值，這便是一個完整的示例了。也希望能更加努力的學(xué)習(xí)和進(jìn)步，更深的理解前端這門藝術(shù) 項目使用ElementUI，挺好用的，頁面中有些地方的幫助提示通過使用組件Tooltip和el-icon-question來展示，代碼如下： 本月累計收益 截圖如下： sho...
閱讀 4071·2021-09-22 10:57
閱讀 2048·2019-08-30 15:55
閱讀 2878·2019-08-30 15:44
閱讀 1874·2019-08-30 15:44
閱讀 2009·2019-08-30 15:44
閱讀 2408·2019-08-30 12:49
閱讀 1184·2019-08-29 18:47
閱讀 3281·2019-08-29 16:15
