CSS 盒模型深入理解 — content、padding、border、margin

深入理解CSS盒模型：标准盒模型vs怪异盒模型、box-sizing属性、margin合并现象、盒子计算实战 · 难度：入门 · +10XP

CSS 盒模型深入理解

CSS 盒模型是网页布局最核心的概念。页面上的每一个元素都是一个矩形盒子，由内容区、内边距、边框和外边距四部分组成。理解盒模型，你就理解了CSS布局80%的奥秘。

盒模型的四个层次

/* 一个盒子的完整结构（从内到外）：
┌─────────────────────────────┐
│         margin (外边距)      │
│  ┌───────────────────────┐  │
│  │     border (边框)      │  │
│  │  ┌─────────────────┐  │  │
│  │  │  padding (内边距) │  │  │
│  │  │  ┌─────────────┐ │  │  │
│  │  │  │  content     │ │  │  │
│  │  │  │  (内容区)    │ │  │  │
│  │  │  └─────────────┘ │  │  │
│  │  └─────────────────┘  │  │
│  └───────────────────────┘  │
└─────────────────────────────┘
*/

标准盒模型 vs 怪异盒模型

这是新手最容易搞混的地方。标准盒模型中，width/height 只设置内容区的大小；怪异盒模型（IE盒模型）中，width/height 包含 content + padding + border。

/* 标准盒模型（默认） */
.box-standard {
  box-sizing: content-box;  /* 默认值 */
  width: 200px;             /* 仅内容区200px */
  padding: 20px;            /* 内边距20px */
  border: 5px solid black;  /* 边框5px */
  /* 实际占用宽度 = 200 + 20*2 + 5*2 = 250px */
}
/* 怪异盒模型（更直观，推荐用于布局） */
.box-border {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  /* 实际占用宽度 = 200px（内容自动缩小到150px） */
}
/* 全局设置：让所有元素使用border-box（推荐做法） */
*, *::before, *::after {
  box-sizing: border-box;
}

盒模型属性详解

margin 的特殊行为

/* 1. margin合并（折叠）：相邻元素的上下margin会合并 */
.div1 { margin-bottom: 30px; }
.div2 { margin-top: 20px; }
/* 它们之间的间距是30px，不是50px！取较大值 */

/* 2. 父子margin传递：子元素的margin-top会"穿透"到父元素 */
.parent { background: #eee; }
.child { margin-top: 50px; }
/* 父元素也会向下移动50px！解决方案： */
.parent {
  overflow: hidden;  /* 或设置padding/border */
}
/* 3. 行内元素的上下margin无效 */
span { margin-top: 20px; }  /* 无效！行内元素上下的margin不生效 */

动手练习

1. 盒子可视化：创建两个div盒子，分别使用content-box和border-box，设置相同的width(300px)、padding(30px)、border(10px)，用不同背景色区分，在浏览器开发者工具中观察它们的实际宽度。
2. margin合并实验：创建三个上下排列的div，设置不同的margin-bottom和margin-top值，观察margin合并现象，然后尝试用border/padding/overflow来阻止合并。
3. 卡片布局：使用盒模型知识制作一个"课程卡片"组件：300px宽，白色背景，1px灰色边框，20px内边距，卡片之间30px间距。使用border-box模式。