1.content-box:宽和高只是内容部分，不包含padding和border
2.border-box:box的宽和高包含padding和border
3.inherit：继承自父级
二、demo
<style type="text/css">
.box1,.box2{
width: 100px
height: 100px
border:20px solid red
padding:20px
float: left
margin-right: 50px
}
.box1{
box-sizing: content-box
}
.box2{box-sizing: border-box}
</style>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
效果图：
![RCT223]26@56_K91HECU_0D.png]( https://upload-images.jianshu.io/upload_images/6955119-520e1f66f0c68568.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
标准CSS盒模型规定width和height样式属于给定内容区域的尺寸，并且不包含boder和padding,可以称此盒子为“内容盒模型＂。在老版的IE里和新版的CSS中都有一些例外，再IE6之前和IE6~8“怪异模式”下显示一个页面时（页面中缺少 ＜IDOCTYPE>或有一个不够严格的 doctype 时），width和height属性确是包含boder和padding的。
IE的为是一个bug,但是IE的非标准盒模型通常也很有用。所以CSS3引进了 box-sizing 属性，默认值是 content-box ,它指定了上面描述的标准的盒模型。如果替换为 box-sizing:border-box ,浏览器将会为那个元素应用IE的盒模型，即width和height属性将包括border和padding,当想以百分比形式为元素是指总体尺寸，又想以像素单位指定border和padding时，边框盒模型特别有用
box-sizing 属性再当今所有浏览器中都支持，但是还没有不带前缀通用的实现。再Chrome和Safari中，使用 -webkit-box-sizing .在Firefox中，使用 -moz-box-sizing .在Opera和IE8及其更高的版本中，可以使用不带前缀的 box-sizing .
边框盒模型在未来CSS3中的一个可选方案是使用盒子尺寸计算值；
在IE9中支持使用 cale() 计算CSS的值，在Firefox为 -moz-cale()
