今天在学响应式网络视图，遇到了box-sizing这个东西，接下来先说一下盒模型。
标准盒模型
正常盒模型，是指块元素box-sizing属性为content-box的盒模型。一般在现代浏览器中使用的都是正常盒模型content-box，它也是标准 w3c 盒子模型。
正常盒模型是指：盒模型的大小包括content，padding，border。并且先做content.。
正常盒模型的大小会以内容优先自动扩展，内部子元素超过父元素给定的大小，会将父元素撑大。
标准盒模型
样式中的宽度100，指的是content为100。
除了正常盒模型还有一种盒模型怪异盒模型
一般在IE浏览器中默认为这种怪异盒模型，但是由于其自身的特殊性，手机页面中也有使用怪异盒模型。
怪异盒模型，是指块元素box-sizing属性为border-box的盒模型
怪异盒模型
怪异盒模型是先做盒。然后添加border，padding，最后做content。即保证盒模型优先，先做盒再放内容，不管内容是否放得下
怪异盒模型
样式中的宽度是指 content+padding x2+border x2
总结：标准盒模型中样式的宽高是content的宽高，怪异盒模型中的宽高是content+padding x2+border x2相加的长度，
box-sizing属性
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。
content-box，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内
下面直接上代码
<style type="text/css">
.content-box{
box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
}
.padding-box{
box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #186645;
background: red;
}
.border-box{
box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #3DA3EF;
background: yellow;
}
</style>
代码所示效果
