当为元素设置 border-right 等边框时，若未启用 box-sizing: border-box，边框会额外增加元素总宽度，导致视觉上“超出”预期尺寸；本文详解通过 box-sizing 统一盒模型行为，并提供可复用的工程化方案。
当为元素设置 `border-right` 等边框时，若未启用 `box-sizing: border-box`，边框会额外增加元素总宽度，导致视觉上“超出”预期尺寸；本文详解通过 `box-sizing` 统一盒模型行为，并提供可复用的工程化方案。
在标准 CSS 盒模型中（box-sizing: content-box，浏览器默认值），元素的 width 仅指内容区宽度，而 border、padding 会额外叠加在该宽度之外。例如：
.secundaria {
width: 500px;
border-right: 5px solid black;
}此时元素实际占用的水平空间为 500px + 5px = 505px，这就是 border-right “超出”容器边界的根本原因——它并非渲染异常，而是盒模型的默认行为。
✅ 推荐解决方案：启用 border-box 盒模型
将 border 和 padding 计入 width 和 height 内部，使尺寸声明真正反映最终布局占用空间：
.secundaria {
width: 500px;
height: 610px;
background-color: #c32929;
margin-top: 90px;
border-bottom: 5px solid black;
border-right: 5px solid black;
box-sizing: border-box; /* ✅ 关键声明 */
}? 更优实践：全局重置盒模型
为避免遗漏，建议在项目根部统一设置（通常置于 reset.css 或主样式入口）：
*, *::before, *::after {
box-sizing: border-box;
}此写法确保所有元素（含伪元素）均采用 border-box 模型，大幅提升布局可控性与团队协作一致性。
? 验证效果（JavaScript 辅助调试）
可通过 getBoundingClientRect().width 获取渲染后真实宽度，对比差异：
const normal = document.querySelector('#normal').getBoundingClientRect().width;
const bordered = document.querySelector('#bordered').getBoundingClientRect().width;
console.log('content-box:', normal); // 输出约 505
console.log('border-box:', bordered); // 输出严格 500? 注意事项
立即学习“前端免费学习笔记（深入）”；
- box-sizing 不影响 margin，外边距始终在盒模型外部；
- 若使用 CSS 预处理器（如 Sass），可封装 @mixin reset-box { box-sizing: border-box; } 提升复用性；
- 在响应式设计中，border-box 能显著简化 max-width 与 padding 的协同计算。
总结：box-sizing: border-box 是现代 CSS 布局的基石之一。它让尺寸定义回归直观语义——“我要一个 500px 宽的盒子”，就真的得到一个 500px 宽的盒子，边框自然内敛，无需手动减去像素值，既健壮又可持续。
