CSS content-box

content-box 是 CSS 盒模型的默认计算模式。

定义

.box {
  box-sizing: content-box;
}

width 和 height 仅指内容区域，padding 和 border 额外增加元素总尺寸。

尺寸计算

.box {
  box-sizing: content-box;
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid #333;
}

/* 内容区：200px × 100px */
/* 实际占用宽度：200 + 20*2 + 5*2 = 250px */
/* 实际占用高度：100 + 20*2 + 5*2 = 150px */

图示

+-----------------------------+
|          margin             |
|  +-----------------------+  |
|  |        border         |  |
|  |  +-----------------+  |  |
|  |  |    padding      |  |  |
|  |  |  +-----------+  |  |  |
|  |  |  |  content  |  |  |  |
|  |  |  | 200×100   |  |  |  |
|  |  |  +-----------+  |  |  |
|  |  +-----------------+  |  |
|  +-----------------------+  |
+-----------------------------+

特点

使用场景

/* 需要精确控制内容区大小时使用 */
.content {
  box-sizing: content-box;
  width: 300px;  /* 内容固定300px */
}

注意：使用 content-box 时，增加 padding 或 border 会导致元素变大，可能破坏布局。

要点总结

• content-box 是默认的盒模型计算方式
• width/height 仅表示内容区尺寸
• padding 和 border 会增加元素总大小
• 布局计算需额外考虑 padding 和 border

存放路径：articles/CSS/入门/CSS盒模型/CSS content-box.md