9. 盒模型基础

本节目标：理解 CSS 盒模型的四个组成部分，学会计算元素的实际尺寸。

万物皆盒子

在 CSS 中，每个 HTML 元素都是一个矩形盒子。这个盒子由四部分组成，从内到外依次是：

内容（content）：文字、图片等实际内容
内边距（padding）：内容与边框之间的空白
边框（border）：包裹内容和内边距的边界
外边距（margin）：边框外部的空白，控制元素之间的距离

用图来表示：

┌──────────────────────────────┐
│         margin（外边距）       │
│  ┌─────────────────────────┐  │
│  │     border（边框）       │  │
│  │  ┌───────────────────┐  │  │
│  │  │  padding（内边距） │  │  │
│  │  │  ┌─────────────┐  │  │  │
│  │  │  │  content    │  │  │  │
│  │  │  │  （内容）    │  │  │  │
│  │  │  └─────────────┘  │  │  │
│  │  └───────────────────┘  │  │
│  └─────────────────────────┘  │
└──────────────────────────────┘

各部分的作用

内容（content）

内容区域显示实际的文字、图片等。width 和 height 属性控制的就是这个区域的大小。

.box {
  width: 200px;
  height: 100px;
}

内边距（padding）

内边距是内容和边框之间的空白，属于元素内部空间。它会继承元素的背景色。

.box {
  padding: 20px;
}

边框（border）

边框包裹内容和内边距，可以设置样式、宽度和颜色。

.box {
  border: 2px solid #333;
}

外边距（margin）

外边距是边框外部的透明空间，控制元素与其他元素之间的距离。

.box {
  margin: 15px;
}

元素的实际尺寸

这是盒模型最容易搞混的地方：width 和 height 只设置内容区域的大小，元素的实际占用空间要加上 padding、border 和 margin。

默认盒模型（content-box）

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
  margin: 10px;
}

实际总宽度计算：

总宽度 = width + 左padding + 右padding + 左border + 右border + 左margin + 右margin
       = 200 + 20 + 20 + 5 + 5 + 10 + 10
       = 270px

Note

margin 不算入元素的可视尺寸，但它占据布局空间。其他三者都计入。

可视化示例

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>盒模型演示</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 5px solid #3498db;
      margin: 30px;
      background: #ebf5fb;
      color: #2c3e50;
    }

    /* 第二个盒子没有 margin，对比间距 */
    .box-alt {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 5px solid #e74c3c;
      margin: 0;
      background: #fdedec;
    }
  </style>
</head>
<body>
  <div class="box">我有 margin 30px</div>
  <div class="box-alt">我的 margin 是 0</div>
</body>
</html>

盒模型的实用技巧

1. 全局重置默认间距

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 水平居中

.container {
  width: 800px;
  margin: 0 auto;  /* 左右 auto 自动平分剩余空间 */
}

3. 利用 margin 负值

/* 让元素向外扩张 */
.overlap {
  margin-top: -20px;
}

学完这章你应该知道

盒模型由内容、内边距、边框、外边距四部分组成
width/height 只设内容区大小
总宽度要加上 padding、border、margin
margin 是透明的，不影响元素自身尺寸但占据布局空间
盒模型是 CSS 布局的基石，后面几章会分别深入每部分

下一章详细讲内边距 padding。