盒模型是界面布局需要掌握的基本功。

盒模型基本概念

盒模型四要素：margin、border、padding、content。

盒模型分為：標準盒模型（W3C盒模型） 、 怪異盒模型（IE盒模型）

盒模型區別

怪異盒模型總寬度 = content + padding

標準盒模型總寬度 = content

盒模型使用

box-sizing: border-box（怪異盒模型） || content-box（標準盒模型）

兼容性

IE8及以上版本支持該屬性，Firefox 需要加上瀏覽器廠商前綴-moz-，對于低版本的IOS和Android瀏覽器也需要加上-webkit-。

總結

以上是生活随笔為你收集整理的前端进阶系列(六):盒模型的全部內容，希望文章能夠幫你解決所遇到的問題。

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