CSS盒模型

CSS 中的盒子模型（Box Model）是分为两种：W3C标准和IE标准盒子模型（怪异模式）。
大多数浏览器采用W3C标准模型，而IE中则采用微软自己的标准。
怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器。
当不对doctype进行定义是会触发怪异模式。

Box model 分类

• 标准模式：块总宽度 = width + padding(left,right) + border(left,right) + margin(left,right)
  

• IE怪异模式：块总宽度 = width(包括了padding和border的值) + margin(left,right)

可以看出标准模式和怪异模式的区别就在于元素的 width 和 height 属性上，怪异模式的 width（height）是包括 padding 和 border 的高宽度的。

box-sizing 属性

CSS3中的 box-sizing 语法：

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

• 当设置为 content-box 时，将采用标准模式（默认模式）；

• 当设置为 border-box 时，将采用怪异模式。

应用场景

使用该属性的场景主要存在于：当我们需要在页面建立一个宽度和高度固定的盒子的时候，设置为默认标准模式通常实际宽度会大于我们需要的大小（设置padding和border），而使用怪异模式反而会轻松的达到目的。

浏览器兼容性

IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-。实际上，很多reset.css或者normal.css里都包含如下CSS语句，也是比较赞成的用法：

*, *:before, *:after {
　　-moz-box-sizing: border-box;
　　-webkit-box-sizing: border-box;
　　box-sizing: border-box;　　
}