怪異盒模型：
box-sizing:
屬性值：
box-sizing:content-box; 常規盒模型
box-sizing:border-box: 怪異盒模型（ie盒模型）
怪異盒模型：
觸發怪異盒模型：
box-sizing:border-box;
怪異盒模型特點：padding和border都會在元素的寬高的內部，不會把盒子撐大。
彈性盒子：布局方案。
作用：控制離它最近的一層子元素,布局方式。
特點：a：彈性盒子裡面的離它最近的一層子元素都可以新增大小。
b: 如果想讓彈性盒子裡面的乙個子元素左右上下居中，只需要給子元素新增margin:auto即可
c: 彈性盒子裡面的子元素都是沿著「主軸」排列
「主軸」:有可能是x軸也有可能是y軸，如果x軸為主軸，y軸就是側軸。
注：預設情況下x軸為主軸。
一：觸發彈性盒子：
display:flex;
二：改變主軸的方向：
flex-direction:
屬性值：
row (預設值：x軸為主軸)
column (y軸為主軸)
column-reverse (以y軸為主軸反向排列)
row-reverse (以x軸為主軸反向排列)
三：改變主軸的對齊方式：
justify-content:
屬性值：
flex-start 預設狀態：在彈性盒子開始的地方顯示
flex-end 在彈性盒子末端對齊
center 居中對齊
space-between 兩端對齊
space-around 自動分配間距
四：側軸的對齊方式:
align-items:
flex-start 側軸開始的位置
flex-end 側軸結束的位置
center 側軸居中的位置
baseline 基線（flex-start等效）
stretch（預設值） 拉伸
五：控制彈性盒子裡面的子元素（靈活元素）換行處理：
flex-wrap:
wrap 換行
nowrap 不換行
wrap-reverse 反向換行
六：控制行與行的對齊方式：
align-content:
flex-start 預設狀態：行與行之間不存在預設的行間距
flex-end 在彈性盒子末端對齊
center 居中對齊
space-between 兩端對齊
space-around 自動分配間距
七：補充：flex-direction 和 flex-wrap簡寫：
flex-flow:;
注：以上7個屬性全部新增在父元素彈性盒子上面！！！！！！！！！！！！！
新增在子元素上面的屬性：
一：控制彈性盒子裡面 某個 靈活元素 在側軸的對齊方式。
align-self:
auto 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 「stretch」。
stretch 元素被拉伸以適應容器。
center 元素位於容器的中心。
flex-start 元素位於容器的開頭。
flex-end 元素位於容器的結尾。
二：控制子元素的排列順序：
order: 數值越大越往後排列。支援負數。
三：剩餘空間的分配：
flex:1; 分配主軸剩餘空間。
flex:1; 簡寫形式。
flex-grow:; 擴充套件的量
flex-shrink:; 收縮的量
flex-basis:; 元素的大小
記住：flex-shrink:0; 不壓縮。
多列屬性：
1：列數：
column-count:;
2:列間距：
column-gap:;
3:列分割線：
column-rule:
4:控制每一列的列的高度是否統一：
column-fill:;
auto 列高度自適應內容
balance 有列的高度以其中最高的一列統一
5:跨列：
column-span:all;
6:列寬
column-width:
7:columns: 7
column-count 和 column-width 簡寫
怪異盒模型 彈性盒模型
標準盒模型 我們平常狀態下所寫的，即為標準盒模型狀態下的css樣式 box怪異盒模型 ie盒模型 p box兩種模式的區別標準模式會被設定的padding撐開，而怪異模式則相當於將盒子的大小固定好，再將內容裝入盒子。盒子的大小並不會被padding所撐開。標準模式 box sizing conten...
怪異盒模型及彈性盒子詳細介紹
content box 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才...
標準盒模型 怪異盒模型 彈性盒模型
box sizing content box 標準盒模型 標準盒模型總寬度 border2 padding2 content box sizing border box 怪異模式 怪異盒模型的總寬度 width margin 左右 width已經包含了padding和border值 flex dir...