box-sizing: border-box 能有效避免因盒模型计算错误导致的布局溢出。默认 content-box 下，width 不包含 padding 和 border，易使元素总宽超出预期；而 border-box 使 width 包含 padding 和 border，确保尺寸精确控制。推荐全局设置 ,::before,*::after { box-sizing: border-box; } 统一计算规则，结合 overflow、flex、grid 等布局手段，可显著降低溢出风险。
在CSS中，box-sizing 本身不能直接“防止”溢出，但它能帮助你更准确地控制元素的尺寸，从而避免因尺寸计算错误导致的布局溢出问题。很多溢出问题其实源于对 width、padding 和 border 的误解，而 box-sizing: border-box 能有效解决这类问题。
理解默认的 box-sizing: content-box
默认情况下，所有元素的 box-sizing: content-box，这意味着：
- 你设置的
width只包括内容区域 - padding 和 border 会额外增加元素总宽度
一个宽度为 width: 300px 的元素，加上左右各 padding: 20px 和 border: 1px，实际占用宽度是：
300 + 20×2 + 1×2 = 342px —— 很容易超出父容器，造成水平滚动或错位。
使用 box-sizing: border-box 避免意外溢出
将 box-sizing 设置为 border-box 后，元素的 width 和 height 包含了 content、padding 和 border：
- 你设置的
width: 300px就是元素最终的总宽度 - padding 和 border 从内容区内部“扣除”，不会增加总尺寸
这样可以确保元素严格按预期尺寸布局，避免“看起来没超但实际溢出”的问题。
立即学习“前端免费学习笔记（深入）”；
推荐做法：全局设置 border-box
为了统一管理尺寸计算，建议在项目开始时为所有元素设置：
*,
*::before,
*::after {
box-sizing: border-box;
}
这样你可以放心设置宽度和间距，不必反复计算 padding 和 border 的影响，大幅降低布局溢出的风险。
结合其他方法真正防止溢出
box-sizing 是预防尺寸失控的第一步，还需配合以下方式彻底防止溢出：
- 给父容器设置
overflow: hidden或overflow-x: auto - 使用弹性布局（
display: flex）或网格布局（display: grid），它们天然具备更强的空间分配能力 - 避免使用固定宽度填充可变空间，优先使用
max-width、flex或百分比
基本上就这些。box-sizing 不是防溢出的“开关”，而是帮你掌控尺寸计算规则的关键工具。用好它，能从根本上减少因盒模型误解导致的布局问题。
