w3c 盒子模型：标准盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是标准盒模型，它也是标准 w3c 盒子模型。
IE盒子模型：怪异盒模型，是指块元素box-sizing属性为border-box的盒模型。一般在IE浏览器中默认为是怪异盒模型，但由于其自身的特殊性，手机页面中也有使用怪异盒模型。
box-sizing：content-box | border-box
默认值：content-box
适用于：所有接受width和height的元素
1、content-box：
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即width + border + padding，表现为标准模式下的盒模型。box-sizing默认值为content-box，可以不写。
#square{ width:300px; height:300px; background:red; padding:10px; border:10px solid transparent; }
2、border-box：
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义border和padding也不会改变对象的实际宽度，表现为怪异模式下的盒模型。
#square{ width:300px; height:300px; background:red; padding:10px; border:10px solid transparent; box-sizing:border-box; }
注意：box-sizing 属性是CSS3的新特性——IE、Opera 以及 Chrome 支持 box-sizing 属性；Firefox需要加上-moz前缀；Safari需要加上-webkit前缀。
box-sizing: border-box的典型应用：
创建一个width为100%，border为10px的div。
问题：不设置box-sizing的情况下，div会溢出。
解决方法：设置box-sizing: border-box。
#square{ width:100%; height:100px; border:10px solid grey; box-sizing:border-box; background:red; }