標準盒模型

　　標準盒模型：是由盒子內容，盒子填充（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　　　拉伸（當子元素不設高時，子元素會被拉長和父元素同高）

　　　　　　　　　　　　　　　　

　　　　　　

　　　　　　　　

總結

以上是生活随笔為你收集整理的标准盒模型，弹性盒模型，怪异盒模型的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。