第16天CSS3 彈性盒

怪異盒模型

box-sizing

box-sizing 屬性允許您以特定的方式定義匹配某個區(qū)域的特定元素。

content-box

這是由 CSS2.1 規(guī)定的寬度高度行為。寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。

border-box

為元素設(shè)定的寬度和高度決定了元素的邊框盒。 就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。 通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。

CSS3 彈性盒

新版彈性盒

1、display:flex

說明： 設(shè)置為彈性盒（父元素添加）

2、flex-direction（主軸排列方式）

說明: 順序指定了彈性子元素在父容器中的位置 　　　　row 默認在一行內(nèi)排列 row-reverse：反轉(zhuǎn)橫向排列（右對齊，從后往前排，最后一項排在最前面。 column：縱向排列。 column-reverse：反轉(zhuǎn)縱向排列，從下往上排，最后一項排在最上面

3、justify-content（主軸對齊方式）

說明： 內(nèi)容對齊（justify-content）屬性應(yīng)用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊 ■ flex-start默認，頂端對齊 ■ flex-end末端對齊 ■ center居中對齊 ■ space-between兩端對齊，中間自動分配 ■ space-around自動分配距離

4、align-items（側(cè)軸對齊方式）

說明： 側(cè)軸對齊方式 flex-start：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界。 flex-end：彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。 center：彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。 baseline：如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。

5、flex-wrap

說明： 該屬性控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。 nowrap：flex容器為單行。該情況下flex子項可能會溢出容器 wrap：flex容器為多行。該情況下flex子項溢出的部分會被放置到新行，子項內(nèi)部會發(fā)生斷行 wrap-reverse：反轉(zhuǎn) wrap 排列。

6、align-content（行與行之間對齊方式）

說明： 當(dāng)伸縮容器的側(cè)軸還有多余空間時，本屬性可以用來調(diào)準(zhǔn)「伸縮行」在伸縮容器里的對齊方式，這與調(diào)準(zhǔn)伸縮項目在主軸上對齊方式的 <' justify-content'> 屬性類似。請注意本屬性在只有一行的伸縮容器上沒有效果。 ■ flex-start沒有行間距 ■ flex-end底對齊沒有行間距 ■ center居中沒有行間距 ■ space-between兩端對齊，中間自動分配 ■ space-around自動分配距離

7、align-self

說明： align-self 屬性規(guī)定靈活容器內(nèi)被選中項目的對齊方式。 注意：align-self 屬性可重寫靈活容器的 align-items 屬性 auto 默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。 Stretch 元素被拉伸以適應(yīng)容器。 Center 元素位于容器的中心。 flex-start 元素位于容器的開頭。 flex-end 元素位于容器的結(jié)尾。

8、order

說明： number排序優(yōu)先級，數(shù)字越大越往后排，默認為0，支持負數(shù)。

9、flex

說明： 復(fù)合屬性。設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。 縮寫「flex: 1」, 則其計算值為「1 1 0%」 縮寫「flex: auto」, 則其計算值為「1 1 auto」 flex: none」, 則其計算值為「0 0 auto」 flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值

10、flex三個屬性值介紹

flex-grow 一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行擴展的量。 flex-shrink 一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行收縮的量。 flex-basis 項目的長度

舊版盒模型(了解)

1、display:box

說明： (必須加前綴)設(shè)置彈性盒 使用如下屬性，必須在父代設(shè)置display:box;

2、box-orient

說明： 在父級上設(shè)置該屬性，則子代按水平排列或豎直排列。 　　　　注：所有主流瀏覽器不支持該屬性，必須加上前綴。 　　　　1）horizontal 水平排列，子代總width=父級width。若父級固定寬度，則子代設(shè)置的width無效，子代會撐滿父級寬度。 　　　　2）vertical 垂直排列，子代總height=父級height。若父級固定高度，則子代設(shè)置的height無效，子代會撐滿父級高度。

3、 box-pack

說明： 在父級設(shè)置，子代的水平對齊方式。（父容器里面主軸對齊方式） 　　　　1）start 水平左對齊 　　　　2）end 水平右對齊 　　　　3）center 水平居中對齊

4、 box-align

說明： 在父級設(shè)置，子代的垂直對齊方式。（父容器里面子容器側(cè)軸對齊方式） 　　　　1）start 垂直頂部對齊 　　　　2）end 垂直底部對齊 　　　　3）center 垂直居中對齊 　　　　4）stretch 拉伸子代的高度，與父級設(shè)置的高度一致。子代height無效。

5、 box-direction

說明： 在父級上設(shè)置該屬性，確認子代的排列順序。 　　　　1）normal 默認值，子代按html順序排列 　　　　2）reverse 反序

6、 box-flex

說明： 1）占父級元素寬度的number份 　　　　2）若子元素設(shè)置固定寬度，則該子元素應(yīng)用固定寬度，其他未設(shè)置固定寬度的字元素將余下的父級寬度（父級-已設(shè)置固定寬度的子代元素的總寬度按　number占份數(shù) 　　　　3）若子元素有margin值，則按余下（父級寬度-子代固定總寬度-總margin值）寬度占number份

CSS3 多列

1、column-count

說明： 屬性規(guī)定元素應(yīng)該被分隔的列數(shù) 適用于：除table外的非替換塊級元素, table cells, inline-block元素

2、column-gap

說明： 說明： 屬性規(guī)定列之間的間隔大小

3、column-rule

說明： 設(shè)置或檢索對象的列與列之間的邊框。復(fù)合屬性。 column-rule-color規(guī)定列之間規(guī)則的顏色。 column-rule-style規(guī)定列之間規(guī)則的樣式。 column-rule-width規(guī)定列之間規(guī)則的寬度。

4、column-fill

說明： 設(shè)置或檢索對象所有列的高度是否統(tǒng)一 auto：列高度自適應(yīng)內(nèi)容 balance：所有列的高度以其中最高的一列統(tǒng)一

5、column-span

說明： 設(shè)置或檢索對象元素是否橫跨所有列。 none：不跨列 all：橫跨所有列

6、column-width

說明： 設(shè)置或檢索對象每列的寬度

7、columns

說明： 設(shè)置或檢索對象的列數(shù)和每列的寬度。復(fù)合屬性

注釋： Internet Explorer 10 和 Opera 支持多列屬性。 Firefox 需要前綴 -moz-。 Chrome 和 Safari 需要前綴 -webkit-。