CSS 盒模型（Box Model）

CSS 盒模型（Box Model）是网页布局的基础概念，每个 HTML 元素在浏览器中都被当作一个矩形盒子，它由以下几个部分组成：

1. 盒模型的四个区域

从内到外，CSS 盒模型包括：

1. 内容区域（Content）：元素的实际内容，如文本、图片等。
2. 内边距（Padding）：内容与边框之间的距离，透明但占据空间。
3. 边框（Border）：围绕内容和内边距的边框，默认不可见但可以设置颜色和样式。
4. 外边距（Margin）：元素与其他元素之间的间距，可以是负值，也可以是 auto（用于居中）。

---

2. 盒模型的计算方式

盒子的**总宽度（Total Width）和总高度（Total Height）**的计算方式如下：

默认盒模型（box-sizing: content-box）计算方式：

总宽度 = 内容宽度（content） + 内边距（padding） + 边框（border） + 外边距（margin）
总高度 = 内容高度（content） + 内边距（padding） + 边框（border） + 外边距（margin）

示例

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

• 总宽度 = 200px（内容） + 10px * 2（内边距） + 5px * 2（边框） = 230px
• 总高度 = 100px（内容） + 10px * 2（内边距） + 5px * 2（边框） = 130px

---

3. box-sizing 影响盒模型

box-sizing 是一个重要的 CSS 属性，它决定了宽度和高度的计算方式：

(1) box-sizing: content-box;（默认）

• 计算宽度和高度时，不包括 padding 和 border，只有 content 部分占据 width / height。
• 适用于需要手动计算 padding 和 border 的情况。

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box;
}

✅ 总宽度 = 200 + 10×2 + 5×2 = 230px
✅ 总高度 = 200 + 10×2 + 5×2 = 230px

---

(2) box-sizing: border-box;（推荐）

• width 和 height 包括 padding 和 border，内容区域会自动调整以适应宽度。
• 推荐使用，可以避免计算宽高时的困扰，适合响应式布局。

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

✅ 总宽度 = 200px（不会额外增加 padding 和 border）
✅ 总高度 = 200px

---

4. margin 叠加（外边距合并）

当两个垂直方向的元素相邻时，它们的 margin 会发生合并，导致最终的 margin 不是简单相加，而是取较大的 margin 值。

示例

.box1 {
  margin-bottom: 30px;
}

.box2 {
  margin-top: 20px;
}

📌 实际的间距不是 30px + 20px = 50px，而是 max(30px, 20px) = 30px

---

5. 盒模型的应用场景

• box-sizing: border-box; 适用于现代网页布局，避免复杂的计算。
• padding 适用于控制内容与边框的距离，如按钮、输入框等。
• margin 适用于控制元素间的间距，如段落、卡片之间的空隙。

---

6. 总结

属性	作用
content	元素的内容部分
padding	内边距，影响内容与边框的距离
border	边框，包裹内容和内边距
margin	外边距，控制与其他元素的间隔
box-sizing: content-box;	默认盒模型，width 不包含 padding 和 border
box-sizing: border-box;	推荐盒模型，width 包含 padding 和 border

💡 最佳实践：

* {
  box-sizing: border-box;
}

✅ 这样所有元素的 width 和 height 都不会因为 padding 和 border 变大，更易于布局！ 🚀