不覆盖伪元素和部分表单控件，需显式补充 ::before、*::after、input、textarea、select、button 等；svg 元素慎用；切换后 js 尺寸逻辑与动画行为会受影响。
直接写 *, *::before, *::after { box-sizing: border-box; } 就行，但漏掉伪元素或表单控件会出视觉错位——这不是“写了就完事”的事。
为什么*单独写不够
通配符 * 只匹配真实 DOM 元素，不匹配 ::before 和 ::after 这类伪元素。而它们常被用来画箭头、装饰边框、做遮罩层——一旦没被覆盖，就会按默认的 content-box 计算尺寸，导致：
- 用 ::after 做三角下拉箭头时，宽高意外膨胀
- ::before 模拟阴影或描边时撑开父容器，引发换行或滚动条
- Safari 或旧版 Chrome 中这类问题更明显，且 DevTools 不会报错，只“看起来不对”
哪些元素要额外照顾
全局规则对某些元素“失灵”，必须显式补漏：
-
input、textarea、select、button在旧版 Safari（≤12）和部分 Android WebView 中不继承box-sizing，需单独声明box-sizing: border-box -
svg、circle、rect等 SVG 图形元素，其width/height是坐标系语义，不是布局盒子，无脑设border-box可能干扰渲染 -
img、video等替换元素本身不受影响，但若加了display: block再设padding，border-box就会生效——这点常被忽略
JS 尺寸读取逻辑会悄悄变
切换到 border-box 后，offsetWidth、getBoundingClientRect().width、clientWidth 返回的值会变小（因为现在包含 padding + border），但代码不会报错。容易崩的点包括：
- Tooltip 自动翻转判断依据是弹出框宽度，计算偏移后可能翻错方向
- 拖拽缩放组件基于
offsetWidth做比例映射，结果缩放比例失真 - Canvas 绘图区域与 DOM 容器尺寸映射错位，图像被裁切或留白
- 所有用
element.offsetWidth > someThreshold做响应式分支的地方都得复查
别在动态样式里切box-sizing
box-sizing 不支持 CSS transition，也不能在 :hover 或动画关键帧中切换。强行写会导致强制重排（layout thrashing），性能掉得明显，且行为不可预测。调试时可临时删掉全局规则，对比 offsetWidth 变化，快速确认是否是它引起的尺寸偏差。
真正难的不是那三行代码，而是别人加了个 .legacy-widget { box-sizing: content-box !important; }，或者某插件 CSS 漏了 ::after，问题只在 Safari 上偶现——这种时候，box-sizing 已经不是语法问题，而是协作边界问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
