box-sizing：content-box | border-box

适用于：所有接受 <' width '> 和 <' height '> 的元素

content-box：

padding 和 border 不被包含在定义的 width 和 height 之内。对象的实际宽度等于设置的 width 值和 border、padding 之和，即 ( Element width = width + border + padding )

此属性表现为标准模式下的盒模型。

border-box：

padding 和 border 被包含在定义的 width 和 height 之内。对象的实际宽度就等于设置的 width 值，即使定义有 border 和 padding 也不会改变对象的实际宽度，即 ( Element width = width )

此属性表现为怪异模式下的盒模型

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;
　　}

举例

box-sizing 布局三栏目案例

div{
height:700px;
float:left;
}
div.left{
width:25%;
background:red;
}
div.cent{
width:50%;
box-sizing:border-box;/_可以改变元素以使其宽度包含填充_/
/_ 现在整个元素,包括填充在内,占页面总宽度的 50%,所以元素的组合宽度为 100%,这全程它们很好地适应于它们的容器._/
background:yellow;
padding:0 20px;/_加了这个会使盒子内容溢出 但是 box-sizing 很好的自适应了_/
}
div.right{
width:25%;
background:blue;
}
如果为 content-box 那么就会把 div right 挤下去