13：怪異盒模型

 

13：怪異盒模型

box-sizing

box-sizing 屬性容許您以特定的方式定義匹配某個區域的特定元素。

content-box

這是由 CSS2.1 規定的寬度高度行爲。寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框。

border-box

爲元素設定的寬度和高度決定了元素的邊框盒。
就是說，爲元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。 經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。

CSS3 彈性盒

新版彈性盒

一、display:flex

說明： 設置爲彈性盒（父元素添加）

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

說明:

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

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

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

四、align-items（側軸對齊方式）

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

五、flex-wrap

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

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

說明： 當伸縮容器的側軸還有多餘空間時，本屬性能夠用來調準「伸縮行」在伸縮容器裏的對齊方式，這與調準伸縮項目在主軸上對齊方式的 <' justify-content'> 屬性相似。請注意本屬性在只有一行的伸縮容器上沒有效果。
■ flex-start沒有行間距
■ flex-end底對齊沒有行間距
■ center居中沒有行間距
■ space-between兩端對齊，中間自動分配
■ space-around自動分配距離

七、align-self

說明： align-self 屬性規定靈活容器內被選中項目的對齊方式。
注意：align-self 屬性可重寫靈活容器的 align-items 屬性
auto 默認值。元素繼承了它的父容器的 align-items 屬性。若是沒有父容器則爲 "stretch"。
Stretch 元素被拉伸以適應容器。
Center 元素位於容器的中心。
flex-start 元素位於容器的開頭。
flex-end 元素位於容器的結尾。

八、order

說明： number排序優先級，數字越大越日後排，默認爲0，支持負數。

九、flex

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

十、flex三個屬性值介紹

flex-grow 一個數字，規定項目將相對於其餘靈活的項目進行擴展的量。 flex-shrink 一個數字，規定項目將相對於其餘靈活的項目進行收縮的量。 flex-basis 項目的長度

舊版盒模型(瞭解)

一、display:box

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

二、box-orient

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

三、 box-pack

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

四、 box-align

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

五、 box-direction

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

六、 box-flex

說明： 1）佔父級元素寬度的number份
　　　　2）若子元素設置固定寬度，則該子元素應用固定寬度，其餘未設置固定寬度的字元素將餘下的父級寬度（父級-已設置固定寬度的子代元素的總寬度按　number佔份數
　　　　3）若子元素有margin值，則按餘下（父級寬度-子代固定總寬度-總margin值）寬度佔number份

CSS3 多列

一、column-count

說明： 屬性規定元素應該被分隔的列數
適用於：除table外的非替換塊級元素, table cells, inline-block元素

二、column-gap

說明：說明： 屬性規定列之間的間隔大小

三、column-rule

說明： 設置或檢索對象的列與列之間的邊框。複合屬性。
column-rule-color規定列之間規則的顏色。
column-rule-style規定列之間規則的樣式。
column-rule-width規定列之間規則的寬度。

四、column-fill

說明： 設置或檢索對象全部列的高度是否統一
auto：列高度自適應內容
balance：全部列的高度以其中最高的一列統一

五、column-span

說明： 設置或檢索對象元素是否橫跨全部列。
none：不跨列
all：橫跨全部列

六、column-width

說明： 設置或檢索對象每列的寬度

七、columns

說明： 設置或檢索對象的列數和每列的寬度。複合屬性

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