box-sizing: border-box 将 padding 和 border 计入 width，使 width: 100% 真实占满父容器；全局启用需用 , ::before, *::after { box-sizing: border-box; }，但不解决 margin、绝对定位及表格单元格默认失效问题。
box-sizing: border-box 是什么，为什么能解决 padding 撑开宽度的问题
当你给一个 div 设置了 width: 100% 又加了 padding: 10px，它实际宽度就变成 100% + 20px（左右各10px），超出父容器——这是 CSS 默认的 box-sizing: content-box 行为。而 box-sizing: border-box 把 padding 和 border 算进 width 里，width: 100% 就真等于“占满父容器”，内容区自动收缩。
这不是“修复 bug”，是换一种盒模型理解方式。现代布局（比如 Flex、Grid）下尤其依赖它保持尺寸可控。
怎么全局启用 border-box，避免漏写
最稳妥的做法是一上来就重置所有块级元素的盒模型：
*, *::before, *::after {
box-sizing: border-box;
}这个写法覆盖所有元素（包括伪元素），且优先级足够高，后续单个元素不用反复写。但要注意：
立即学习“前端免费学习笔记（深入）”；
- 不要只写
* { box-sizing: border-box; }—— 会漏掉::before/::after，它们可能带 padding/border 导致意外溢出 - 不要在重置前用其他
box-sizing声明，否则可能被覆盖 - 第三方 UI 库（如 Ant Design）通常已内置该重置，重复写不会冲突，但没必要
哪些地方不能只靠 border-box 解决
box-sizing: border-box 管不了外边距（margin）和绝对定位偏移（left/right）。常见踩坑点：
- 父容器用了
display: flex，子项设了width: 100%+padding，但父容器没设overflow: hidden→ padding 不会撑破，但内容可能换行或截断，得看flex-shrink - 用了
position: absolute，又设left: 0; right: 0; padding: 10px→ 此时width已失效，padding 会让内容区变窄，但整体仍占满，容易误判尺寸 - 表格单元格（
td）默认不响应box-sizing，需显式设置才生效
移动端适配时 border-box 的兼容性注意点
所有现代浏览器（包括 iOS Safari 6+、Android Browser 4.4+）都支持 box-sizing，无需前缀。但有两点容易被忽略：
- 老版本微信内置浏览器（X5 内核 v3.7 以下）对
*::before, *::after的重置支持不稳定，建议用html { box-sizing: border-box; }+ 后代选择器兜底 - 如果项目用了 rem/vw 布局，
padding也得用相对单位（比如padding: 0.5rem），否则固定像素 padding 在小屏上会显得过大 - 某些 CSS-in-JS 库（如 styled-components）在 SSR 场景下可能把重置样式注入顺序错乱，导致首屏闪动，建议把重置样式提至
<head>最顶部
真正麻烦的从来不是加不加 box-sizing，而是它生效后，你原来靠 content-box “凑尺寸”的 hack 写法全得重算一遍。
