前端进阶系列—盒模型

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

盒模型基本概念

盒模型四要素:marginborderpaddingcontent

盒模型分为:标准盒模型(W3C盒模型) 、 怪异盒模型(IE盒模型)

盒模型区别

怪异盒模型总宽度 = content + padding

标准盒模型总宽度 = content

盒模型使用

1
box-sizing: border-box(怪异盒模型) || content-box(标准盒模型)

兼容性

IE8及以上版本支持该属性,Firefox 需要加上浏览器厂商前缀-moz-,对于低版本的IOS和Android浏览器也需要加上-webkit-。