一、概述
box-sizing属性是用来改变默认的css盒模型，用来计算元素的宽度和高度。可以用这个属性来模拟浏览器不正确的支持css盒模型规范的行为。
默认值：content-box
适用：所以具有高度和宽度的元素
二、语法
/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;
/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;
三、值
content-box
按照css标准这是初始值和默认值。宽度和高度的计算是只包括内容，不包括padding、border、margin. 例如：如果 .box{width:350px;} 然后设置其边框{border:10px solid black;}那么最终在浏览器渲染的结果是 .box{width:370px}
简单来说，元素的尺寸可以这样计算：width = width of the content, and height = height of the content (不包括border和padding的值)
border-box
宽度和高度包括padding和border，但是不包括margin。这是IE浏览器盒模型的怪异模式。e.g. .box{width:350px;border:10px solid black;}在浏览器box渲染的结果是width:350px。这种情况内容框不能为负数，它的下限是0，可以用border-box使元素消失。
这种情况下元素的尺寸计算：width = border + padding + width of the content, and height = border + padding + height of the content.
padding-box
这个属性在很多文档里面都是没有列出来的，目前我测试的部分只有Firefox能支持这个属性。此时元素的宽度和高度计算是包括padding，但是不包括border和margin。e.g. .box{width:350px;border:10px solid black;padding:20px;}在浏览器box渲染的结果是width:370px。
这种情况下元素的尺寸计算：width = border + width of the content, and height = border + height of the
content.
四、兼容性
PC端
移动端
五、案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
.wrapper{
width: 1200px;
margin: 50px auto 0 auto;
}
.wrapper div{
width: 100px;
height: 100px;
padding: 20px;
border:5px solid #000;
margin-right: 20px;
float: left;
}
.wrapper .content-box{
-webkit-box-sizing: content-box;
box-sizing: content-box;
background: green;
}
.wrapper .padding-box{
-webkit-box-sizing: padding-box;
box-sizing: padding-box;
background: yellow;
}
.wrapper .border-box{
-webkit-box-sizing: border-box;
box-sizing: border-box;
background: orange;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content-box"></div>
<div class="padding-box"></div>
<div class="border-box"></div>
</div>
</body>
</html>
结果：
chrome、IE下测试结果
firefox下测试结果
原文：http://www.cnblogs.com/eireenyin/p/5262654.html