CSS盒子模型总结

分类对比

• 盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型 ，
• 区别
  width是否包含border 和 pading（标准盒子不包含）
  box-sizing: content-box | border-box | inherit (inherit的时候直接从父元素继承)
• content-box，即默认是标准盒子模型（即width就是content。div实际的宽度大于width）

标准 （w3c） 盒子模型

• width 部分不包含border 和 pading。
• 标准盒模型 box-sizing: content-box

ie 盒子模型

• width 部分包含border 和 pading
• IE盒模型 box-sizing: border-box;
  

应用背景