box-sizing: border-box 能解决 width: 100% 溢出问题，因其将 padding 和 border 纳入 width 计算，使总宽严格等于父容器；而 content-box 下 width 仅指内容区，加 padding/border 后必然溢出。
box-sizing: border-box 能解决 width: 100% 溢出问题
当你给一个 input 写 width: 100%，再加 padding: 12px 和 border: 1px solid #ccc，在默认 content-box 下，实际宽度 = 100% + 24px + 2px —— 必然撑破父容器，小屏下直接触发横向滚动条。
设成 border-box 后，width: 100% 就真等于“占满父容器可用空间”，padding 和 border 向内压缩内容区，总宽严丝合缝。
- 移动端尤其敏感：iOS Safari 虚拟键盘弹出时视口压缩，多出的 2px 就是溢出导火索
- 表单控件（
input、textarea、select）必须单独重置，不能只靠*—— 某些 UI 库或浏览器固有样式会覆盖全局设置 - 搭配
max-width: 100%+width: 100%双保险，防极端缩放或嵌套容器干扰
flex 和 grid 布局中 box-sizing 不统一就对不齐
flex-basis 和 grid-template-columns 的数值行为，仍受 box-sizing 影响。两个都设 width: 50% 的子项，在 content-box 下若一个有 padding、一个没有，实际占位就不同，右边总多出 1–2px 缝隙。
这不是 flex 或 grid 本身的问题，而是盒模型计算基准不一致导致的视觉错位。
-
flex容器里，flex-basis: 200px在border-box下才真正占满 200px（含padding和border） -
grid中1fr分配虽不直接受影响，但一旦你给 item 设了固定width，就又回到box-sizing规则里 - 第三方组件库（如 antd、element-plus）常自带重置样式，可能局部覆盖你的全局设置 —— 检查 computed styles 时，盯着
box-sizing这一行看，别只认 class 名
全局设置 * { box-sizing: border-box } 为什么必须带 ::before 和 ::after
::before 和 ::after 是独立渲染节点，不继承父元素的 box-sizing。只写 *，它们仍走默认 content-box，容易在用伪元素做装饰边框、遮罩层、图标时出现尺寸偏差。
比如按钮上用 ::after 绘制圆角描边，width: 100% 却因没设 border-box 而向外撑开 2px，破坏对齐。
- 安全写法是：
*, *::before, *::after { box-sizing: border-box; } - 漏掉伪元素，某些 CSS-in-JS 库动态注入的装饰性样式会意外失效
- 旧版 Safari 对
*::after有兼容性 bug，这个写法已避开主流问题
哪些地方必须手动切回 content-box
绝大多数场景用 border-box 更稳，但少数情况它反而让逻辑变复杂：
-
canvas容器要求内部绘图区域严格为 500px，而border-box会让width: 500px包含border，实际绘图区变小 - 使用
background-size: contain且依赖原始 content 尺寸对齐图片时，border-box会干扰背景定位基准 - 某些遗留 JS 模块硬编码了
content-box计算逻辑（比如手动加padding补尺寸），强行改会导致测量错乱
这些不是例外太多，而是真正容易被忽略的点：即使写了全局重置，iframe 里的样式、shadow DOM 内部、以及通过 document.createElement 动态插入的元素，都可能绕过该规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
