怪異盒模型：由margin和content（border/padding）組成
盒模型轉換：box-sizing：content-box(標準盒模型);boeder-box(怪異和模型)
這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。
為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
flex布局 (1rem=16px rem是針對於html，em是針對于父元素)
flex布局：當給父元素新增display：flex，只影響當前的父級和子級，不影響第三層元素。
flex容器：採用 flex 布局的元素的父元素；
flex專案：採用 flex 布局的元素的父元素的子元素；
容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。
專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。
注意，設為 flex 布局以後，子元素的float、clear和vertical-align屬性將失效。
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch（預設值）;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content在側軸上執行樣式的時候，會把預設的間距給合併。對於單行子元素，該屬性不起作用
flex專案屬性（新增給子元素的屬性）
internet explorer 和 safari 瀏覽器不支援 align-self 屬性
說明：align-self 屬性規定靈活容器內被選中專案的對齊方式。
注意：align-self 屬性可重寫靈活容器的 align-items 屬性。
屬性值auto 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。
stretch 元素被拉伸以適應容器。
center 元素位於容器的中心。
flex-start 元素位於容器的開頭。
flex-end 元素位於容器的結尾。
說明：number排序優先順序，數字越大越往後排，預設為0，支援負數。
說明：復合屬性。設定或檢索彈性盒模型物件的子元素如何分配空間
詳細屬性值：
縮寫「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-grow
flex-grow：會讓當前子元素放大，預設值是0，當有剩餘空間時，當前子元素新增的無單位的整數，代表放大的份數。如果沒有剩餘空間不放大。
flex-shrink
空間不充足時，子元素會縮小，預設值是1，當一組子元素flex-shrink都為1時，空間不足時，都縮小，如果其中乙個子元素flex-shrink：0，當前子元素不縮小，其它子元素縮小。如果空間充足時，當前所有的子元素都不縮小。
flex-basis
flex-basis相當於width
怪異盒模型 彈性盒模型
標準盒模型 我們平常狀態下所寫的，即為標準盒模型狀態下的css樣式 box怪異盒模型 ie盒模型 p box兩種模式的區別標準模式會被設定的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。標準模式 box sizing conten...
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...
怪異盒模型 彈性盒模型 多列
怪異盒模型 怪異盒模型 box sizing border box 怪異盒子包括了border 和 padding 新增邊框和內填充不會把盒子撐大 會保持原有大小彈性盒模型 彈性盒的特點 1 彈性盒的最近一層子元素可以設定大小 忽略元素型別 2 單個子元素在彈性盒垂直水平居中 margin auto...