標准盒模型
標准盒模型：是由盒子內容，盒子填充（padding），盒子邊框(border)，盒子邊距(margin)組成。
如圖可見藍色為內容區，淺藍為邊距（padding）區，紅色為邊框，最外的是邊距。標准的盒模型添加屬性會使元素本身變大，要想元素本身不變，就要減去邊距（padding.）
怪異盒模型
怪異盒模型：和標准不同的是，怪異盒模型是固定大小，只要給定值，邊距（padding）就不會撐開盒子，但它會向內容里面擠。給元素添加
box-sizing:border-box;就能使元素形成怪異盒子 .整個元素的大小是200*200，但是內容區被擠壓變小為60，因為填充（padding）和邊框（border）會把內容往里擠。
當內容擠沒時，就由填充和邊框組成的元素的大小。
彈性盒模型
彈性盒模型（一般用在手機端）：是父元素控制子元素（不包含孫元素以下），的布局方式。給父元素添加display：flex；就能形成彈性盒子，這時子元素就會在“主軸”上排列，默認是X軸為主軸（Y軸就是側軸），意思就是說不需要添加浮動就能使元素左右排列。如果父元素是彈性盒子，子元素能直接添加寬高，子元素居中只要寫margin:auto;就行。
通過:flex-direction:屬性改變主軸
row (默認)X軸為主軸
row-reverse X反向排列
column Y軸為主軸
column-reverse Y 反向排列
通過justify-content:屬性改變主軸的對齊方式
屬性值：flex-start 初始位置
flex-end 末端位置
center 居中
space-between 兩端對齊中間自動平分空間
space-around 完全自動平分空間
通過align-items:屬性改變側軸的對齊方式（屬性值和主軸的屬性值一樣）
通過flex-wrap:屬性改變控制子元素在彈性盒子里是否換行
屬性值：nowrap 不換行
wrap 換行
wrap-reverse 反向換行
通過align-content:屬性控制行和行之間的對齊方式（屬性值和主軸的屬性值一樣，有一個獨立）。默認情況下align-content在側軸上執行樣式的時候，會把默認的間距合並，單行子元素不起作用。
屬性值：strech 拉伸（當子元素不設高時，子元素會被拉長和父元素同高）
