盒模型尺寸计算偏差主因是content-box下width/height仅指内容区，padding和border向外扩展致总宽超预期；box-sizing:border-box可统一将width/height定义为内容+padding+border总和。

布局调试总偏差，核心原因往往不是写错了代码，而是对盒模型的尺寸计算逻辑存在“认知盲区”——浏览器按规则算，你按直觉想，结果自然对不上。

默认 box-sizing 是 content-box，width/height 只管内容区

这是最常被忽略的前提。当你写：
.card { width: 300px; padding: 16px; border: 2px solid #ccc; }
你以为它占 300px 宽？错。实际总宽度是：
300px（内容） + 32px（左右 padding） + 4px（左右 border） = 336px。
如果父容器正好是 300px，这个 card 就会溢出、换行或触发横向滚动。

padding 和 border 不是“加在内部”，而是“向外撑开”

在 content-box 模式下，padding 和 border 并不压缩内容区，而是从内容区边缘向外扩展空间。这意味着：

• 背景色会延伸到 padding 区，但不会覆盖 border（border 在 padding 外层）
• margin 始终在最外层，不影响自身尺寸，只影响与其他元素的距离
• 多个并排元素若都设 width: 50%，再各自加 padding，总宽度轻松突破 100%

box-sizing: border-box 是最直接的纠偏手段

它把 width/height 的含义从“仅内容”变成“内容 + padding + border”。上面那个 card 写成：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

.card {
  width: 300px;
  padding: 16px;
  border: 2px solid #ccc;
  box-sizing: border-box;
}

这时 300px 就是最终渲染宽度，padding 和 border 全部向内“挤”，内容区自动缩为 264px。推荐在项目开头统一设置：

立即学习“前端免费学习笔记（深入）”；

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

现代布局能绕过盒模型干扰，但不能替代理解

Flex 和 Grid 本身不改变盒模型，但它们的分配逻辑天然弱化了单个元素宽高的绝对依赖：

• 用 flex: 1 分配空间时，padding 不会导致溢出，容器会自动减去已用空间
• Grid 的 grid-template-columns: 1fr 1fr 或 gap 属性，让间距由容器统一分配，子项无需手动扣尺寸
• 但若子项仍用 width: 100% + padding，且没设 border-box，gap 之外仍可能撑破轨道