CSS 盒子模型

CSS 盒子模型（Box Model）是 CSS 布局最核心的概念：浏览器会把页面中的每个元素都看作一个矩形的"盒子"。只有彻底搞懂盒子由哪几部分组成、宽度又是如何计算的，你才能真正掌控元素的大小、间距与页面排版，因此它是 CSS 学习路上绕不开的第一课。

什么是盒子模型

所有 HTML 元素都可以被看作盒子，从内到外由四部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin），就像快递包裹里的货物、泡沫、纸箱和外层空隙一样层层包裹。

div {
  width: 200px;                  /* 内容区的宽 */
  height: 100px;                 /* 内容区的高 */
  padding: 10px;                 /* 内边距：内容与边框之间 */
  border: 5px solid #333;        /* 边框：套在内边距外面 */
  margin: 20px;                  /* 外边距：盒子与盒子之间 */
}

各部分的作用

• 内容区：真正显示文字、图片的区域，由 width 与 height 决定。
• 内边距：撑开内容与边框的距离，背景色会覆盖该区域。
• 边框：盒子的轮廓线，可设粗细、样式与颜色。
• 外边距：拉开盒子与相邻元素的距离，是透明区域，不显示背景。

/* 背景只覆盖 内容+内边距 以内的区域 */
.box {
  width: 100px;
  padding: 10px;
  border: 5px solid black;
  margin: 10px;
  background: yellow;   /* 黄色背景延伸到边框内侧 */
}

总宽度到底怎么算

默认（content-box）下，width 只代表内容区宽度，盒子实际占用的总宽度还要加上左右内边距和左右边框，外边距则另外占位：

div {
  width: 300px;
  padding: 25px;            /* 左右内边距共 50px */
  border: 5px solid red;    /* 左右边框共 10px */
  margin: 10px;             /* 左右外边距共 20px */
}
/* 总宽度 = 300 + 50 + 10 + 20 = 380px */

用 box-sizing 简化计算

盒子的总宽公式记忆繁琐，实际项目里常用 box-sizing: border-box，让 width 直接包含内边距和边框，元素铺满布局时更不容易超出容器：

* {
  box-sizing: border-box;   /* width = 内容 + 内边距 + 边框 */
}

<!-- 设了 border-box 后，两个 50% 宽的盒子就能正好并排 -->
<div style="width:50%;float:left;box-sizing:border-box;border:1px solid gray">左</div>
<div style="width:50%;float:left;box-sizing:border-box;border:1px solid gray">右</div>

小结

盒子模型由内容、内边距、边框、外边距四层组成，默认宽度计算要"四层相加"，推荐用 box-sizing:border-box 简化。下一节我们详细讲解边框 border 的各种写法。