必须同时写 ::before 和 ::after 是因为伪元素不继承 box-sizing，默认为 content-box，* 选择器无法匹配伪元素；表单控件需单独处理以避免旧版 safari 渲染异常；切换后 js 尺寸 api 返回值逻辑静默变化。
直接在 CSS 开头写 *, *::before, *::after { box-sizing: border-box; } 就能统一所有元素的盒模型计算标准，这是当前生产环境的通用起手式。
为什么必须同时写 *::before 和 *::after
伪元素不继承父元素的 box-sizing，它们默认始终是 content-box。只写 * 会漏掉所有 ::before 和 ::after，导致布局静默错位。
- 常见现象：用
::before画三角形箭头时，容器意外换行；用::after做渐变遮罩时高度溢出 - DevTools 中检查任意伪元素的 computed
box-sizing，若没显式声明，值一定是content-box - 这不是浏览器兼容问题，而是选择器匹配规则本身决定的：
*不匹配伪元素，*::before是独立选择器
input、textarea、select 等表单控件要单独处理
旧版 Safari（≤12）和部分 Android WebView 对这些元素的 border-box 支持不完整，直接全局覆盖会导致光标偏移、高度塌陷或边框渲染错位。
- 稳妥做法是显式重置：
input, textarea, select, button { <code>box-sizing: border-box; } - 配合
-webkit-appearance: none可缓解部分原生 UI 渲染异常 - 如果项目必须支持 iOS 12 及更早版本，建议对表单控件保留
content-box，或仅在明确需要时局部启用
切换后 JS 尺寸读取逻辑会静默变化
offsetWidth、getBoundingClientRect().width 等 API 返回的值，在 border-box 下等于「设置的 width」，不再是「content 宽 + padding + border」。这不会报错，但会让依赖尺寸的逻辑跑偏。
- 重点检查：Tooltip 自动翻转判断、弹窗居中计算、Canvas 坐标映射、拖拽缩放比例
- 调试技巧：临时禁用全局
box-sizing规则，在 DevTools 控制台对比element.offsetWidth值变化 - 避免在
:hover或动画中动态切换box-sizing——transition 对它无效，只会触发 layout thrashing
真正容易被忽略的不是那三行 CSS，而是它生效后，所有已存在的 JS 尺寸计算都可能隐式失效；尤其是当设计稿标注的是“视觉总宽”，而代码里却用 clientWidth 去对齐时，偏差就藏在像素级的计算差异里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
