必须显式声明 ::before 和 ::after 的 box-sizing，因为伪元素不继承父级设置，默认 content-box；表单控件需单独设置 border-box 并配合 -webkit-appearance: none；JS 尺寸读取逻辑会因 box-sizing 切换而静默变化。
直接用 *、*::before、*::after 三行规则就能统一移动端盒模型，但漏掉伪元素或表单控件会立刻出问题——这不是兼容性问题，而是布局计算逻辑被悄悄破坏。
为什么必须写 *::before 和 *::after
伪元素不继承父级 box-sizing，默认仍是 content-box。你写了 * { box-sizing: border-box; }，但 ::before 画的三角箭头、装饰边框、遮罩层仍按内容宽 + padding + border 计算，结果就是：容器看起来没溢出，实际内部撑开了 2px，导致换行、滚动条意外出现、定位偏移。
-
*::before和*::after是独立选择器，必须显式声明才能生效 - DevTools 里检查伪元素的 computed
box-sizing，能看到它确实是content-box（除非你写了那行） - 常见踩坑场景：用伪元素做下拉箭头、卡片阴影、渐变遮罩时尺寸错位
移动端表单控件要单独处理
旧版 Safari（≤12）和部分 Android WebView 对 、、 的 border-box 支持不完整：光标位置偏移、高度塌陷、边框渲染错位。这不是 bug，是原生 UI 层未完全适配。
- 别用通配符覆盖，改用显式声明：
input, select, textarea { box-sizing: border-box; } - 加
-webkit-appearance: none;配合，能缓解部分渲染异常 - 如果项目需支持 iOS 12 及更早版本，建议对这些元素保留
content-box，或只在必要处局部设border-box
JS 尺寸读取逻辑会静默变化
切换到 border-box 后，element.offsetWidth、getBoundingClientRect().width 返回的是“含 padding + border”的总宽，不再是 content-box 下的纯内容宽。这不会报错，但会让依赖尺寸的逻辑跑偏。
- 重点检查：
Tooltip自动翻转判断、弹窗居中计算、拖拽缩放比例、Canvas 坐标映射 - 调试技巧：临时禁用全局
box-sizing规则，在 DevTools 里对比offsetWidth值变化 - 避免在
:hover或 CSS 动画中动态切换box-sizing——transition对它无效，只会触发 layout thrashing
真正麻烦的不是加那三行 CSS，而是加完之后没人去查 JS 里那些隐式依赖 content-box 的尺寸计算。尤其当设计稿给的是“视觉宽度”，而代码读的是 offsetWidth，偏差就藏在毫厘之间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
