CSS盒模型

[mbaxszy7]

记录一下CSS盒模型

盒模型

content-box：W3C 标准盒模型

• width,height只包含内容content区域，不包含border和padding

border-box： IE 盒模型

• width 和 height 包含content+padding+border

从计算上看，border-box更符合人的直觉，比如实际生活中的纸盒子.

项目中设置盒模型

如果由第三方库不兼容box-sizing: border-box，则可以如下设置

  : root { box-sizing: border-box; }
  *,
  ::before,
  ::after {
    box-sizing: inherit;
  }
// 这样的话不会破坏第三方组件可能改变的box-sizing
// 可以在必要时选中第三方组件的顶级容器，将其恢复为 content-box
.third-party-component { box-sizing: content-box; }

CSS in Depth