使用 box-sizing: border-box 可解决 padding 和 border 导致元素尺寸超出的问题，使 width 和 height 包含内边距和边框，确保总宽高不变，推荐全局设置 ,::before,*::after { box-sizing: border-box; } 以统一布局行为。
在网页布局中，padding 和 border 会增加元素的总尺寸，导致实际占用空间超出设置的 width 和 height，从而影响页面排版。比如一个 div 设置了 width: 200px，再加 padding: 20px 和 border: 5px，最终宽度会变成 250px（200 + 20×2 + 5×2），容易引发溢出或错位。
解决这个问题最有效的方式是使用 CSS 的 box-sizing 属性，它可以改变元素尺寸的计算方式，让开发更直观地控制布局。
box-sizing: content-box（默认行为）
这是所有元素的默认值。此时：
- width 和 height 只包含内容区域
- padding 和 border 会额外增加元素总尺寸
- 布局容易失控，尤其在响应式设计中
box-sizing: border-box（推荐方案）
将 box-sizing 设置为 border-box 后：
立即学习“前端免费学习笔记（深入）”；
- width 和 height 包含内容、padding 和 border
- 设置 width: 200px 就是总共占 200px，不管内边距和边框多大
- padding 和 border 从内容区域“向内挤压”，不撑大整体尺寸
示例对比：
/* 默认情况 */
div {
width: 200px;
padding: 20px;
border: 5px solid #000;
/* 实际宽度：200 + 40 + 10 = 250px */
}
<p>/<em> 使用 border-box 后 </em>/
div {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid #000;
/<em> 实际宽度：正好 200px，内容区自动缩小 </em>/
}</p>全局设置简化开发
为了避免每个元素都要单独处理，建议在项目开始时统一设置：
*,
*::before,
*::after {
box-sizing: border-box;
}
这样所有元素都采用 border-box 模式，布局更 predictable（可预测），减少计算负担，特别适合栅格系统、卡片组件等对尺寸敏感的设计。
基本上就这些。用 box-sizing: border-box 能大幅降低因 padding 和 border 引发的布局问题，是现代 CSS 开发的标配实践。
