CSS多列布局

2022-01-17 17:59:56 字數 2603 閱讀 5684

css新增了多列布局特性,可以讓瀏覽器確定何時結束一列和開始下一列,無需任何額外的標記。簡單來說,就是css3多列布局可以自動將內容按指定的列數排列,這種特性實現的布局效果和報紙、雜誌類排版非常相似。本文將詳細介紹css多列布局的基本屬性和用法

[注意]ie10+和chrome瀏覽器支援標準寫法,而firefox、safari瀏覽器及移動端android、ios需要新增字首

column-width

值: auto |

初始值: auto

應用於: block、inline-block、table-cell(firefox不支援為table-cell設定該屬性)

繼承性: 無

[注意]column-width不可為0和負值;當column-width的值為auto或column-width的值大於元素寬度width一半時,沒有分列效果(更準確地,由其他屬性來決定)

column-count

值: auto |

初始值: auto

應用於: block、inline-block、table-cell(firefox不支援為table-cell設定該屬性)

繼承性: 無

[注意]column-count不可為0和負值;當column-count的值為auto時,預設沒有分列效果(更準確地,由其他屬性來決定)

列間距column-gap用於定義相鄰兩列之間的空白間距

column-gap

值: normal |

初始值: normal

應用於: block、inline-block、table-cell

繼承性: 無

[注意]column-gap的normal值預設情況下相當於1em。column-gap值不可為負值

column-rule

值: || ||

標準中說column-rule類似於border,但實際更類似於outline,因為該樣式並不佔據實際的物理尺寸。outline詳細情況移步至此

[注意]如果column-rule-width的寬度大於column-gap的寬度,則可能會顯示在列框內容中

column-span屬性用來定義子元素是否跨列

[注意]firefox不支援該屬性,ie10+和chrome瀏覽器支援標準寫法,而safari瀏覽器及移動端android、ios需要新增字首

column-span

值: none | all

初始值: none

應用於: block元素、table-cell元素(只有safari支援為table-cell設定該屬性)

繼承性: 無

none: 預設不跨列

all: 跨越所有列

[注意]當跨列元素被絕對定位(包括固定定位)或浮動後,跨列將不生效

[注意]當跨列元素與column-rule的修飾線重疊時,在ie和safari中,跨列元素將覆蓋修飾線,而chrome瀏覽器存在bug,跨列元素的文字覆蓋修飾線,但跨列元素的背景可能會消失。

在列布局中,有時由於內容不足,多列中的最後列往往沒有足夠內容填充,這時要實現所有列都具有相同高度的效果,需要使用列填充屬性column-fill

column-fill

值: auto | balance

初始值: auto

應用於: block、inline-block

繼承性: 無

auto: 預設各列高度隨內容變化而變化

balance: 各列高度根據內容最多的一列進行統一

[注意]目前只有firefox支援帶字首的column-fill屬性

一般地,我們只關心是否分列以及列寬多少,對列間距並不考慮。於是,column這個column-width和column-count的復合屬性就得到了比較廣泛的使用

columns: column-width || column-count

[注意]由於column-width和column-count這兩個值的單位不同,所以順序無關

元素寬度 = 列數 * 列寬 + (列數-1)*列間距 <=> 列數*(列寬+列間距) - 列間距 =元素寬度

或者, 列數 = (元素寬度+列間距)/(列寬+列間距)

或者, 列寬 = (元素寬度+列間距)/列數 - 列間距

如果元素寬度為auto,且列寬和列數都不是auto

則 n = column-count w = column-width;

如果列寬為auto,但列數不是auto,元素寬度不為auto

則 n = column-count w = max(0,(元素寬度 - ((n-1)*列間距))/n)

如果列寬不為auto,但列數是auto,元素寬度不為auto

則 n = max(1,floor((元素寬度 + 列間距) / (列寬 + 列間距 )) w = ((元素寬度 + 列間距) / n) - 列間距

如果列寬和列數都不是auto,元素寬度不為auto

則 n = min(列寬 , floor((元素寬度 + 列間距) / (列寬 + 列間距))) w = ((元素寬度 + 列間距) / n) - 列間距

[注意]若列數為小數,只保留整數部分

[注意]所有的情況都是先推算出實際列數,再由實際列數推算實際列寬

CSS多列布局

多列布局適合純文字版式設計,如報紙內和雜誌類網頁布局,不適合做網頁結構布局。靈活使用多列布局特性,可以實現在多列中顯示文字和,從而節省大量的網頁空間。如果網頁上的文字很長,多列布局特性就能夠發揮它的用武之地。相容性參考 columns是多列布局特性的基本屬性,類似邊框特性中的border屬性,該屬性...

CSS多列布局

效果 我的爸爸剛剛30出頭,他的面容,要比他的年齡,成熟穩重的多,但是,他可沒有蒼老憔悴哦!爸爸的身高有180公分,體重75公斤,是個標準的型男身材。如果,我說我爸爸是個大帥哥,可一點也沒有撒謊呢!在我們小區裡,就組建了乙個籃球隊,爸爸,可是他那隊裡的佼佼者呢!每當,我們小區和其他小區,有籃球比賽的...

CSS多列布局

個人部落格 需要注意的是 本篇文章的布局,都未對父元素進行清除浮動的操作,所以在有一些使用了float的布局中,需要在parent容器清除浮動,才能在實際情況下使用。清除浮動的方式在這裡不做討論 這部分的html結構如下 left right right 大家先來看看直接在左側新增浮動是怎麼樣的吧 ...