标准盒模型和怪异盒模型的区别

CSS盒模型：

• 内容区（content）
• 内边距（padding）
• 边框（border）
• 外边距（margin）

分为标准盒模型和IE盒模型/怪异盒模型

为了正确设置元素在所有浏览器中的宽度和高度，需要了解盒模型是如何工作的。

重点：

种类	总宽度
标注盒模型	标准模式下，一个元素所占据的总宽度=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right，高度同理。
IE盒模型/怪异盒模型	在怪异模式下，一个块元素所占据的总宽度=margin-left+width+margin-right（即 width 已经包含了 padding 和 border），高度同理。

可以使用 box-sizing 属性来控制使用哪种盒模型。

box-sizing:content-box 是 W3C 盒子模型。

box-sizing:border-box 是 IE 盒子模型/怪异盒模型。