1. 程式人生 > >好程式設計師web前端技術分享css3舊版彈性盒

好程式設計師web前端技術分享css3舊版彈性盒

 好程式設計師web前端技術分享css3舊版彈性盒

1、display:box

說明:

(必須加字首)設定彈性盒

使用如下屬性,必須在父代設定display:box;

2、box-orient

說明:

在父級上設定該屬性,則子代按水平排列或豎直排列。

    注:所有主流瀏覽器不支援該屬性,必須加上字首。

1)horizontal  水平排列,子代總width=父級width。若父級固定寬度,則子代設定的width無效,子代會撐滿父級寬度。

2)vertical  垂直排列,子代總height=父級height。若父級固定高度,則子代設定的height無效,子代會撐滿父級高度。

 3、 box-pack

說明:

在父級設定,子代的水平對齊方式。(父容器裡面主軸對齊方式)

1)start  水平左對齊

2)end  水平右對齊

3)center  水平居中對齊

 4、 box-align

說明:

在父級設定,子代的垂直對齊方式。(父容器裡面子容器側軸對齊方式)

1)start  垂直頂部對齊

2)end 垂直底部對齊

3)center 垂直居中對齊

4)stretch 拉伸子代的高度,與父級設定的高度一致。子代height無效。

 5、 box-direction

說明:

在父級上設定該屬性,確認子代的排列順序。

1)normal  預設值,子代按html順序排列

2)reverse  反序

 

 6、 box-flex

說明:

1)佔父級元素寬度的number份

2)若子元素設定固定寬度,則該子元素應用固定寬度,其他未設定固定寬度的字元素將餘下的父級寬度(父級-已設定固定寬度的子代元素的總寬度按 number佔份數

3)若子元素有margin值,則按餘下(父級寬度-子代固定總寬度-總margin值)寬度佔number份

四、CSS3 多列

CSS多列(屬性要加字首)

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 '>

例:columns:100px 3;

 

註釋:

 Internet Explorer 10 和 Opera 支援多列屬性。

 Firefox 需要字首 -moz-。

 Chrome 和 Safari 需