盒子模型分为 w3c 标准盒子模型和 IE 的传统盒子模型（IE6 以下，不包含 IE6 版本或 “QuirksMode 下 IE5.5+”）。
如果添加 <!DOCTYPE html> 文档类型声明，按照标准盒子模型解析，如果没有添加文档类型声明，各浏览器按照自己的方式解析，比如 IE 浏览器用传统盒子模型解析，火狐浏览器用标准盒子模型解析。
box-sizing 可以设置使用哪一种盒子模型，即使用哪种方式解析盒子尺寸。
语法
box-sizing : content-box | border-box;
盒子模型计算
不管哪种盒子模型，都包括 margin 、padding、border、content 这四个元素。
标准盒子模型（content-box）
盒子在页面所占宽度：左外边距+左边框+左内边距+所设置宽度（内容宽度）+右内边距+右边框+右外边距
盒子在页面所占高度：上外边距+上边框+上内边距+所设置宽度（内容高度）+下内边距+下边框+下外边距
所设置的宽度（高度）=内容宽度（高度）
IE 盒子模型（border-box）
盒子在页面所占宽度：左外边距+所设置宽度（左边框+左内边距+内容宽度+右内边距+右边框）+右外边距
盒子在页面所占高度：上外边距+所设置高度（上边框+上内边距+内容高度+下内边距+下边框）+下外边距
所设置的宽度（高度）=内容宽度（高度）+内边距+边框
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子模型的计算</title>
<style type="text/css">
.content-box{
box-sizing: content-box;
width: 100px;
height: 100px;
margin: 30px;
padding: 20px;
border: 2px solid red;
}
.border-box{
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 30px;
padding: 20px;
border: 2px solid orange;
}
</style>
</head>
<body>
<div class="content-box"></div>
<div class="border-box"></div>
</body>
</html>
效果图：
content-box.jpg
border-box.jpg
两个盒子设置的宽和高都是一样的，现在计算一下盒子在页面中所占的宽和高。
- content-box
width=30px+2px+20px+100px+20px+2px+30px=204px
height=30px+2px+20px+100px+20px+2px+30px=204px - border-box
width=30px+100px=130px
height=30px+100px=130px
其中100px=2px+20px+56px+20px+2px。
