标准写法是html { box-sizing: border-box; }和, ::before, *::after { box-sizing: inherit; }，兼顾兼容性与可覆盖性；需手动将input、textarea、select、button、svg text等重置为content-box以避免渲染异常。
全局设置 box-sizing: border-box 的标准写法
直接在项目入口 CSS 最顶部写这两行，就能覆盖绝大多数元素的盒模型行为：
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
第一行给 html 元素设死 border-box，它不参与渲染，零副作用；第二行让所有元素（含伪元素）继承这个值，而不是硬写死——这样后续组件里显式声明 box-sizing: content-box 依然有效，不会被通配符暴力覆盖。
为什么不能只写 * { box-sizing: border-box; }
看似简洁，但有三个实际问题：
- 老版本 Safari（≤12.1）对
*::before, *::after的匹配存在 bug，单独用通配符可能漏掉伪元素，导致它们回退到默认的content-box，引发尺寸错乱 -
* { ... }优先级高于很多组件内联样式或 scoped 样式，容易意外覆盖本该用content-box的元素（比如input） - 没有为继承留余地，一旦某个子组件需要切换盒模型，只能靠更高优先级样式强行覆盖，维护成本陡增
哪些元素必须手动重置为 content-box
以下控件在 WebKit 内核下（尤其是 Safari 和旧版 Chrome）用 border-box 会挤压内容区，造成光标偏移、文字截断或 placeholder 错位：
-
input（特别是type="search"、type="number"） -
textarea、select、button -
svg text元素（其font-size与height计算强耦合） - 使用
transform: scale()做适配的容器（缩放后border-box的像素对齐会失准）
建议集中声明，避免散落在各处：
input, textarea, select, button, svg text {
box-sizing: content-box;
}
验证时最容易忽略的兼容性盲点
别只在 Chrome 里点开 DevTools 看一眼就认为 OK。真实问题常出现在：
- Safari 中
input[type="search"]的清除按钮（×）和光标位置偏移 - Firefox 下
textarea拉伸后，最后一行文字被边框截断 - 移动端 iOS Safari 对
svg text的dominant-baseline渲染受box-sizing影响，导致垂直居中失效
这些不是“偶尔出问题”，而是盒模型切换后必然触发的底层渲染差异。只要涉及表单、SVG 或高精度缩放，就必须在三端（Chrome / Safari / Firefox）实机或模拟器里逐个敲击输入、拖拽拉伸、缩放滚动来确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
