揭秘怪异盒模型

今天在学响应式网络视图，遇到了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之内
下面直接上代码

代码所示效果