第16天CSS3 彈性盒

怪異盒模型

box-sizing

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

content-box

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

border-box

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

CSS3 彈性盒

新版彈性盒

1、display:flex

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

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

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

3、justify-content（主軸對(duì)齊方式）

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

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

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

5、flex-wrap

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

6、align-content（行與行之間對(duì)齊方式）

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

7、align-self

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

8、order

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

9、flex

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

10、flex三個(gè)屬性值介紹

flex-grow 一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。 flex-shrink 一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。 flex-basis 項(xiàng)目的長(zhǎng)度

舊版盒模型(了解)

1、display:box

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

2、box-orient

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

3、 box-pack

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

4、 box-align

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

5、 box-direction

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

6、 box-flex

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

CSS3 多列

1、column-count

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

2、column-gap

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

3、column-rule

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

4、column-fill

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

5、column-span

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

6、column-width

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

7、columns

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

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