天天看點

好程式員web前端教育訓練分享之HTMLCSS學習筆記css3-多列

  好程式員web前端教育訓練分享之HTMLCSS學習筆記css3-多列,多列布局類似報紙或雜志中的排版方式,主要用以控制大篇幅文本。

多列屬性

1、column-count

屬性規定元素應該被分隔的列數

适用于:除table外的非替換塊級元素, table cells, inline-block元素

2、column-gap

屬性規定列之間的間隔大小

3、column-rule

設定或檢索對象的列與列之間的邊框。複合屬性。

column-rule-color規定列之間規則的顔色。

column-rule-style規定列之間規則的樣式。

column-rule-width規定列之間規則的寬度。

4、column-fill

設定或檢索對象所有列的高度是否統一

auto:列高度自适應内容

balance:所有列的高度以其中最高的一列統一

5、column-span

設定或檢索對象元素是否橫跨所有列。

none:不跨列

all:橫跨所有列

6、column-width

設定或檢索對象每列的寬度

7、columns

設定或檢索對象的列數和每列的寬度。複合屬性

<' column-width '> || <' column-count '>

注:Internet Explorer 10 和 Opera 支援多列屬性。 Firefox 需要字首 -moz-。 Chrome 和 Safari 需要字首 -webkit-。

繼續閱讀