盒模型

这一课你将能做到

1. 画出盒模型四层结构：content、padding、border、margin
2. 说清楚 content-box 和 border-box 的区别
3. 解释 margin 折叠现象并能规避
4. 在 F12 DevTools 里查看任何元素的盒模型

为什么要学

盒模型是 CSS 布局的根基。每个元素都是一个矩形盒子，width、padding、border、margin 加起来才是它的真实占地面积。不理解盒模型，你就不知道为什么 width: 100% 加 padding 会撑破容器，为什么两个 margin 会合并。

人话：盒模型像快递包裹——物品本身是 content，泡沫填充是 padding，纸箱是 border，包裹之间的间隔是 margin。

先建立图像

┌────────────────────────── margin ──────────────────────────┐
│  ┌────────────────────── border ──────────────────────┐   │
│  │  ┌────────────────── padding ──────────────────┐   │   │
│  │  │  ┌──────────── content ────────────┐        │   │   │
│  │  │  │                                 │        │   │   │
│  │  │  │      实际内容（文字、图片）       │        │   │   │
│  │  │  │                                 │        │   │   │
│  │  │  └─────────────────────────────────┘        │   │   │
│  │  └─────────────────────────────────────────────┘   │   │
│  └────────────────────────────────────────────────────┘   │
└────────────────────────────────────────────────────────────┘

实际占用宽度 = margin×2 + border×2 + padding×2 + width

跟着做

步骤 1：四层结构

.box {
    width: 200px;          /* content 宽 */
    padding: 20px;         /* 内边距 */
    border: 5px solid #333; /* 边框 */
    margin: 30px;          /* 外边距 */
    background: #ffe4e1;
}

content-box（默认）下：实际宽 = 200 + 20×2 + 5×2 = 250px，再加 margin 30×2，对外占地 310px。

步骤 2：padding 内边距

.box { padding: 20px; }                /* 四边都 20 */
.box { padding: 10px 20px; }           /* 上下 10，左右 20 */
.box { padding: 10px 20px 30px; }      /* 上 10，左右 20，下 30 */
.box { padding: 10px 20px 30px 40px; } /* 上右下左（顺时针） */

/* 单独一边 */
.box { padding-top: 10px; }

padding 是内容和边框之间的填充，会带着背景色。

步骤 3：border 边框

.box { border: 2px solid #333; }        /* 宽度 样式 颜色 */
.box { border: 1px dashed red; }
.box { border-radius: 8px; }            /* 圆角 */
.box { border-radius: 50%; }            /* 圆形（需正方形） */

/* 单独一边 */
.box { border-bottom: 1px solid #eee; } /* 卡片分割线常用 */