CSS盒模型

CSS 的盒模型（Box Model）是 CSS 中用于布局和计算元素尺寸的核心概念。每个 HTML 元素都被视为一个矩形的盒子，这个盒子由四个部分组成（从内到外）：

1. 内容区（content）

   • 实际显示内容的区域（如文字、图片等）。
   • 由 width 和 height 属性控制其大小。

2. 内边距（padding）

   • 内容区与边框之间的空间。
   • 可通过 padding-top、padding-right、padding-bottom、padding-left 或简写 padding 设置。
   • 背景色会延伸到 padding 区域。

3. 边框（border）

   • 围绕在 padding 外的一圈边界。
   • 由 border-width、border-style、border-color 控制（或简写为 border）。

4. 外边距（margin）

   • 盒子与其他元素之间的透明空间。
   • 通过 margin-top、margin-right、margin-bottom、margin-left 或简写 margin 设置。
   • margin 不计入元素的背景或边框，主要用于控制元素间的间距。

---

盒模型的两种类型

CSS 提供了两种盒模型计算方式，由 box-sizing 属性控制：

• content-box（默认值）

  • 设置的 width/height 仅指内容区的尺寸。
  • 元素总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

• border-box

  • 设置的 width/height 包含内容、padding 和 border。
  • 元素总宽度 = width + margin-left + margin-right
  • 更直观，常用于现代布局（可通过 * { box-sizing: border-box; } 全局重置）

---

示例

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: content-box; /* 默认 */
}

• 内容宽度：200px
• 总宽度（不含 margin）：200 + 20×2 + 5×2 = 250px
• 总占用宽度（含 margin）：250 + 10×2 = 270px

若改为 box-sizing: border-box，则：

• 内容宽度 = 200 - 20×2 - 5×2 = 150px
• 总宽度（不含 margin）：200px

---

理解盒模型对于精确控制页面布局至关重要，尤其是在响应式设计和组件对齐时。