W3C盒模型与IE盒模型的区别

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

盒模型更细的知识点