方框模型

CSS 显示的所有内容都是一个方框，理解 CSS 方框模型的工作原理是 CSS 的核心基础。

<p>I am a paragraph of text that has a few words in it.</p>

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

每个方框由4个部分组成。

1. 内容区域 Content box

   如果 box-sizing 为 content-box（默认），则内容区域的大小可明确地通过 width、min-width、max-width、height、min-height 和 max-height 控制。

   content-box 称为标准方框模型，最终占据的宽度为 width + padding + border + margin。

2. 内边距区域 Padding box

   内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left，和简写属性 padding 控制。

3. 边框区域 Border box

   边框的粗细由 border-width 和简写的 border 属性控制。

   如果 box-sizing 属性被设为 border-box，那么边框区域的大小可明确地通过 width、min-width, max-width、height、min-height，和 max-height 属性控制。

   border-box 称为怪异方框模型，最终占据的宽度为 width + margin。

4. 外边框区域 Margin box

   外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left，和简写属性 margin 控制。在发生外边距合并的情况下，由于盒之间共享外边距，外边距不容易弄清楚。