CSS 盒模型的学习笔记

2026-05-24 · 阅读 4 分钟

学 CSS 绕不开盒模型。网页上的每个元素都是一个矩形盒子，从里到外分四层：内容（content）、内边距（padding）、边框（border）、外边距（margin）。

四层结构

.box {
  width: 200px;        /* 内容宽度 */
  padding: 20px;       /* 内边距：内容和边框之间的空隙 */
  border: 2px solid;   /* 边框 */
  margin: 16px;        /* 外边距：和其他盒子之间的距离 */
}

注意 width 默认指的只是内容那一层的宽度，不是整个盒子的宽度。

大坑：宽度怎么算

上面那个盒子实际占多宽？200 + 20×2 + 2×2 = 244px，再加 margin。我一开始以为 width: 200px 就是整个盒子 200px，做两栏布局的时候怎么都对不齐，多出来的 44px 把另一栏挤下去了。

解决办法是 box-sizing：

* {
  box-sizing: border-box;
}

设置成 border-box 以后，width 就包含 padding 和 border 了，写 200px 就真的占 200px，心里有数多了。现在我的每个页面开头都会写这一行。

margin 的折叠现象

还有一个奇怪的事：上下两个段落，一个 margin-bottom: 20px，一个 margin-top: 16px，它们之间的距离不是 36px，而是 20px——取大的那个。这叫外边距折叠，只发生在垂直方向。一开始我以为是自己算错了，查了半天才确认这是规范行为。

小结

盒模型是 CSS 布局的地基，搞清楚每一层的含义和 box-sizing 的区别，后面学布局才不会晕。下一篇的 flex 布局就是在这些盒子之间排兵布阵。