什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法

所有的HTML元素可以看作盒子，它包括四部分组成。每个元素在页面中占位大小 = content + padding + margin + border。

 

1）Margin(外边距)清除边框外的区域，外边距是透明的。

2）Border(边框)围绕在内边距和内容外的边框。

3）Padding(内边距)清除内容周围的区域，内边距是透明的。

4）Content(内容)盒子的内容，显示文本和图像。

 W3C盒模型和怪异盒模型的区别？

标准盒模型（W3C）内容大小等于content大小。padding和border不被包含在定义的width和height之内。盒子的实际宽度=设置的width+padding+border

IE盒模型（怪异盒模型）内容大小等于content + padding + border的总和。padding和border被包含在定义的width和height之内。盒子的实际宽度=设置的width（padding和border不会影响实际宽度）

 

box-sizing可以设置盒子的类型

box-sizing: content-box || border-box || inherit

box-sizing:border-box，为IE盒模型（怪异盒模型）。

box-sizing:content-box，为标准盒模型（W3C盒模型）例如：Firefox/Chrome。

box-sizing:inherit，规定应从父元素继承 box-sizing 属性的值

一般默认浏览器使用标准盒模型。

例子：