启用 box-sizing: border-box 可解决元素宽度异常问题，因其使 width 包含 padding 和 border，避免 content-box 下实际宽度超出预期导致内容压缩或溢出。
当元素设置了固定宽度，但实际显示比预期窄，或者内容撑不开容器，大概率是 box-sizing 默认值（content-box）在“捣鬼”。启用 border-box 后，宽度就包含 padding 和 border，计算更直观，能快速解决宽高与内容不匹配的问题。
为什么 content-box 容易导致宽度错觉
默认的 box-sizing: content-box 意味着：你写的 width: 200px 仅代表内容区宽度。一旦加了 padding: 10px 或 border: 2px solid #000，实际占用空间就变成 200 + 2×10 + 2×2 = 224px。浏览器照常渲染，但视觉上元素“变宽了”，内容区域却被压缩，看起来像“宽度不够”或“文字换行异常”。
用 border-box 统一宽度基准
把 box-sizing 设为 border-box，就能让 width 值代表整个盒子的最终宽度（含 padding + border），内容区自动收缩让位。推荐全局重置：
定位元素（如 absolute/fixed）特别要注意
绝对定位元素常配合 top/right/bottom/left 使用，若同时设了 width 和 padding 却没设 box-sizing: border-box，容易出现：
- 右侧留白或溢出（因为 padding 让内容区变窄，但 right 按 content-box 的右边界计算）
- 宽度无法精准贴合父容器（比如
left: 0; right: 0; width: 100%加了 padding 后实际超宽）
box-sizing: border-box。
检查和调试小技巧
遇到宽度异常时，可快速验证：
- 打开浏览器开发者工具，选中元素 → 查看右侧 Computed 面板，搜索
box-sizing确认当前值 - 在 Styles 面板中临时勾选/取消
box-sizing: border-box，观察布局是否立刻恢复正常 - 对定位元素，同时检查
width、padding、border和box-sizing四者是否协同一致
