盒模型 - CSS 教程

讲解

CSS 把页面上的每个元素都当作一个矩形盒子，盒子从内到外分四层：content（内容，width/height 设定的就是它）、padding（内边距，内容与边框之间，会显示背景色）、border（边框）、margin（外边距，盒子与外界的间距，永远透明、不算进盒子的尺寸）。元素在页面上占据的总空间 = 内容 + 左右 padding + 左右 border + 左右 margin。

关键分歧在于 width 到底指哪一层。历史默认是 box-sizing: content-box——width 只指内容宽度，加上 padding 和 border 后实际占用会变宽，算布局时要心算加法，极易出错。现代方案是 box-sizing: border-box——width 直接指「内容 + padding + border」的总宽度，padding 加大只会向内挤压内容，盒子外尺寸不变，布局立刻变得可预测。现在几乎所有项目都会在全局重置里加上它。

理解盒模型还要知道两件事：一是块级盒子的默认宽度是「占满父容器」（width: auto），默认高度由内容撑开；二是 margin 完全在盒子之外，两个盒子的 margin 还会发生「折叠」（下一章细讲）。调试盒模型的最佳工具是 DevTools：选中元素后右下角的可视化盒模型图会用四种颜色标出四层尺寸。

示例

/* 现代项目的标配第一行：全站切到 border-box */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* content-box 下：实际占宽 = 200 + 20*2 + 2*2 = 244px，心算噩梦 */
.old-school {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
}

/* border-box 下：实际占宽就是 200px，padding 向内挤压内容 */
.modern {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid #333;
}

/* 一个典型卡片：四层结构各司其职 */
.card {
  width: 320px; /* 内容区宽（border-box 下含 padding 和 border） */
  padding: 24px; /* 内容与边框之间留白，显示背景色 */
  border: 1px solid #dee2e6; /* 盒子边界 */
  margin: 16px auto; /* 与外界的距离；水平 auto 配合定宽实现居中 */
  background: #fff;
}

常见坑

没设 border-box 就动手布局：width: 25% 的四栏因为各自带 padding 而溢出换行，是新手第一次布局必踩的坑。先把全局 box-sizing 重置写上。
以为 margin 算进盒子尺寸：给两个 width: 50% 的盒子各加 10px margin，总宽变成 100% + 40px，必然换行。间距要么用 padding（要算进宽度）、要么用父容器的 gap。
给行内元素设宽高不生效：、默认是 inline，width/height 和上下 margin 都不生效（上下 padding 视觉上有但不推开别人）。需要尺寸请改 display: inline-block 或 block。
height 写死导致内容溢出：默认高度由内容撑开是特性不是 bug。除非必要（如头图），尽量用 min-height 而不是 height。

小结

盒子 = 内容 + padding + border + margin；border-box 让 width 可预测，应全站开启；margin 在盒子之外且永远透明。下一章细讲 margin 与 padding 的行为，尤其是著名的「外边距折叠」。