问题出在默认盒模型将padding和border额外计算，导致元素总宽度超出设定值；通过设置box-sizing: border-box，可使width包含padding和border，从而控制实际宽度不被撑大；推荐全局设置,::before,*::after{box-sizing:border-box}以统一布局行为，避免意外的尺寸溢出。
在使用CSS布局时，经常会遇到元素的实际宽度超出预期的问题——比如设置了一个width: 200px的盒子，结果它却占了220px甚至更宽。这通常是因为**默认的盒模型计算方式**导致的：元素的padding和border会额外增加总宽度。
要解决这个问题，最有效的方法是使用 box-sizing 属性来调整宽度的计算方式。
问题出在哪里？默认盒模型会“加法计算”
标准盒模型（content-box）下，元素的总宽度 = width + padding + border + margin。例如：
- width: 200px
- padding: 10px
- border: 5px solid #000
实际占据的宽度就是：200 + 20 (左右padding) + 10 (左右border) = 230px，远大于你设定的200px。
立即学习“前端免费学习笔记（深入）”；
解决方案：用 box-sizing: border-box 改变计算规则
将元素的 box-sizing 设置为 border-box，可以让 width 和 height 包含 content、padding 和 border，不再额外撑大。
.box {
width: 200px;
padding: 20px;
border: 5px solid #000;
box-sizing: border-box; /* 关键设置 */
}
此时，这个元素的总宽度仍然是 200px，padding 和 border 会被“压缩”进这个宽度内，不会撑开布局。
推荐做法：全局统一盒模型
为了避免每个元素都要单独处理，建议在项目开始时统一设置所有元素使用 border-box：
*,
*::before,
*::after {
box-sizing: border-box;
}
这样可以确保整个页面的布局计算方式一致，极大减少“莫名被撑大”的问题，提升开发效率和响应式兼容性。
基本上就这些——一个小小的 box-sizing: border-box，能帮你避开大多数宽度失控的坑。
