CSS border-box

border-box 是替代盒模型，width 和 height 包含 padding 和 border。

定义

CSS

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

尺寸计算

CSS

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

/* 实际占用宽度：200px（固定） */
/* 实际占用高度：100px（固定） */
/* 内容区宽度：200 - 20*2 - 5*2 = 150px */
/* 内容区高度：100 - 20*2 - 5*2 = 50px */

图示

CSS

+-----------------------------+
|          margin             |
|  +-----------------------+  |
|  |      border (5px)      |  |
|  |  +-----------------+  |  |
|  |  | padding (20px)  |  |  |
|  |  |  +-----------+  |  |  |
|  |  |  |  content  |  |  |  |
|  |  |  | 150×50    |  |  |  |
|  |  |  +-----------+  |  |  |
|  |  +-----------------+  |  |
|  +-----------------------+  |
+-----------------------------+

整体宽高固定为 200×100

与 content-box 对比

特性	content-box	border-box
width 包含	仅内容	内容+padding+border
设定尺寸	可能被撑大	固定不变
布局计算	复杂	简单直观
推荐程度	默认值	推荐使用

全局推荐设置

text

*,
*::before,
*::after {
  box-sizing: border-box;
}

注意：使用 border-box 后，修改 padding 或 border 不会影响元素总尺寸，便于响应式布局。

要点总结

border-box 的 width/height 包含 padding 和 border
元素尺寸固定，便于布局计算
推荐全局设置 border-box
margin 不包含在 width/height 中

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

📝 发现内容有误？点击此处直接编辑