- columns屬性是一個(gè)復(fù)合屬性——列寬(column-width)和列數(shù)(column-count)驱入,可以同時(shí)定義多列的列數(shù)和每列的列寬上岗。
columns: <column-width> || <column-count>
- <column-width>:定義多列種每列的寬度慢睡。
- <column-count>:定義多列中的列數(shù)掸宛。
- column-width屬性類似于給列定義一個(gè)最小寬度(min-width)泪幌。
column-width: auto | <length>
- auto:默認(rèn)值惊豺,如果值為auto或者沒(méi)有顯示設(shè)置值時(shí)呀非,元素多列的列寬將有其他屬性來(lái)決定坚俗。
- <length>:使用固定值來(lái)設(shè)置元素列的寬度,其主要是由數(shù)值和長(zhǎng)度單位組成岸裙,不過(guò)其值只能時(shí)正值猖败,不能為負(fù)值。
column-width單獨(dú)使用時(shí)降允,當(dāng)容器超出列寬時(shí)恩闻,會(huì)以多列顯示,反之容器寬度小與設(shè)置的列寬時(shí)剧董,容器將只顯示為一列判呕。
- column-count屬性主要用來(lái)給元素指定想要的列數(shù)和允許的最大列數(shù)。
column-count: auto | <integer>
- auto:默認(rèn)值送滞,表示元素只有一列侠草,其主要依靠瀏覽器計(jì)算自動(dòng)設(shè)置。
- <integer>:正整數(shù)值犁嗅,主要用來(lái)定義元素的列數(shù)边涕,取值為大于0的整數(shù),負(fù)值無(wú)效褂微。
列數(shù)=(容器寬度-間距)/列間距
瀏覽器對(duì)所求列數(shù)的值是去余取整功蜓,且如果元素設(shè)置了列數(shù),不管元素容器的寬度是多少或者間距多少宠蚂,總是顯示固定的列數(shù)式撼。
- column-gap屬性類似于盒模型中的margin一樣,主要用來(lái)設(shè)置元素分列的列間距求厕,其只能設(shè)置列與列之間的間距著隆。
column-gap: normal | <length>
- normal:默認(rèn)值,主要通過(guò)瀏覽器默認(rèn)設(shè)置時(shí)行解析呀癣,一般情況下美浦,normal值相當(dāng)于1em。
- <length>:由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長(zhǎng)度值项栏,主要用來(lái)設(shè)置列與列之間的距離浦辨,常用px、em單位的任何整數(shù)值沼沈,其值不能為負(fù)值流酬。
column-gap可以用來(lái)改變相鄰列之間距離币厕,但在多列元素同時(shí)設(shè)置了column-width時(shí),column-gap與column-width等參數(shù)之和大于多列元素總寬度時(shí)芽腾,會(huì)導(dǎo)致列被撐破旦装,并將以當(dāng)前列數(shù)減1的列數(shù)顯示,此時(shí)列寬自動(dòng)調(diào)節(jié)到適當(dāng)?shù)牧袑挕?/strong>
- column-rule屬性主要是用來(lái)定義列與列之間的邊框?qū)挾然耷丁⑦吙驑邮胶瓦吙蝾伾保行╊愃朴诔S玫腷order屬性,但column-rule是不占用任何空間位置的惭载,在列與列之間改變其寬度不會(huì)改變?nèi)魏瘟械奈恢谩?br> column-rule: <column-rule-width> | <column-rule-style> | <column-rule-color>
- column-rule-width:類似于border-width屬性旱函,主要用來(lái)定義列邊框的寬度,其默認(rèn)值為medium描滔,該屬性接受任意浮點(diǎn)數(shù)棒妨,但不接受負(fù)值。像border-width屬性一樣含长,可以使用款見(jiàn)此medium券腔、thick和thin。
- column-rule-style:此值類似于border-style屬性拘泞,主要用來(lái)定義列邊框樣式纷纫,其默認(rèn)值為none。該屬性值與border-style屬性值相同陪腌,包括none辱魁、hidden、dotted诗鸭、dashed染簇、solid、double强岸、groove锻弓、ridge、inset蝌箍、outset青灼。
- column-rule-color:此值類似于border-color屬性,主要用來(lái)定義列邊框顏色十绑,其默認(rèn)值為前景色color的值聚至,使用時(shí)相當(dāng)于border-color。該屬性接受所有的顏色本橙。如果不希望顯示顏色,也可以將其值設(shè)置為transparent(透明色)脆诉。
column-rule-width增大并不會(huì)影響列的布局甚亭,其不占有任何空間位置贷币。
column-rule在Z軸上是介于background和content之間,當(dāng)column-rule-width寬度增加到超過(guò)列與列的間距時(shí)亏狰,列邊框就會(huì)自動(dòng)消失役纹。
- column-span屬性主要用來(lái)定義一個(gè)分列元素中的子元素能跨多少列,有時(shí)需要一段內(nèi)容或一個(gè)標(biāo)題不進(jìn)行分列暇唾,也就是橫跨所有列促脉,就可以用該屬性實(shí)現(xiàn)。
column-span: none | all
- none:默認(rèn)值策州,表示不跨越任何列瘸味。
- all:跟none值正好相反,表示的是跨越所有列够挂,并定位在列的Z軸之上旁仿。
- column-fill屬性主要用來(lái)定義多列種每一列的高度是否統(tǒng)一。
column-fill: auto | balance
- auto:默認(rèn)值孽糖,各列的高度隨其內(nèi)容的變化自動(dòng)變化枯冈。
- balance:各列的高度將會(huì)根據(jù)內(nèi)容最多的一列的高度進(jìn)行統(tǒng)一。