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