W3C盒模型和IE盒模型的区别
IE盒模型:width(宽度）=padding+border(边框）+content(内容宽度）；
W3C盒模型:width(宽度）=content(内容宽度）；
ie6 7 8 怪异模式（不添加doctype)的情况下使用IE盒模型，宽度=padding+border(边框）+content(内容宽度）；
chrome ie6 7 9(添加doctype)的情况下使用W3C盒模型，宽度=content(内容宽度）；
{box-sizing:border-box}的作用是什么呢？
box-sizing:content-box W3C盒模型；
box-sizing:border-box IE盒模型；
盒子模型基准尺寸有两种，一种是content-box，这是对于W3C盒模型尺寸计算的；另一种是border-box,这是对于IE盒模型尺寸计算的；
border-box和content-box之间的区别其实就是在于有没有包含表边框（border)和内边距（padding).
1.png
2.png
作者：饥人谷张雪莲
链接：https://www.jianshu.com/p/9361c56f494d