知识库

Appearance

盒模型的组成 ​

  • Content box: 这个区域用来显示内容，通过 width 和 height 设置大小。

  • Padding box: 这个区域是内容区域外的空白区域，通过 padding 设置大小。

  • Border box: 边框盒包裹内容和内边距，通过 border 设置大小。

  • Margin box: 盒子和其它元素之间的空白区域，通过 margin 设置大小。

标准盒模型 ​

如果你设置 width 和 height，实际设置的是 content box。 盒子实际大小 = width / height + padding * 2 + border * 2

替代（IE）盒模型 ​

如果你设置 width 和 height，实际设置的是 content box + padding + border 的总大小。 盒子实际大小 = width / heigth

浏览器默认使用标准模型。如果需要使用替代模型，设置 box-sizing: border-box。

如果你希望所有元素都使用替代模式，设置 box-sizing 在 <html> 元素上，然后设置所有元素 继承该属性。

html
<style>
  html {
    box-sizing: border-box;
  }
  *, *::before, *::after {
    box-sizing: inherit;
  }
</style>