最稳妥的全局切换方式是在 css 入口顶部插入：html { box-sizing: border-box; } , ::before, *::after { box-sizing: inherit; }，确保继承链完整且兼容现代浏览器。
为什么直接写 box-sizing: border-box 不够用
因为 Tailwind 默认不接管盒模型，所有元素仍走 content-box；你手动在每个类里加 box-sizing: border-box 既重复又易漏，尤其表单控件（input、textarea）、伪元素（::before、::after）默认不继承，一漏就溢出。
- 全局重置必须覆盖
*、*::before、*::after，否则伪元素仍按 content-box 计算 - 第三方 UI 库（如 Ant Design）可能已设
box-sizing，叠加后产生冗余声明，调试时难定位 - SSR 或 Shadow DOM 场景下，
*选择器可能不生效，得在组件内显式调用
Tailwind 中最稳妥的全局切换方式
不用改配置文件，也不依赖插件——直接在 CSS 入口（如 src/index.css）顶部插入标准重置块：
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
这比 * { box-sizing: border-box } 更可靠：避免某些浏览器对 * 的继承限制，且确保伪元素和后代元素行为一致。
-
html元素设为border-box是锚点，后续所有inherit都有明确源头 - 不需要额外写
-webkit-或-moz-前缀——现代构建工具（Vite/Webpack + autoprefixer）会自动补全 - 若项目需兼容 IE9+，该写法完全有效；IE8 及以下不支持
box-sizing，无 fallback 方案
哪些元素必须单独再声明 box-sizing
表单控件是重灾区：不同浏览器给 input、select、button 设了不同默认 box-sizing，光靠继承不够稳定。
- 务必显式加：
input, textarea, select, button { box-sizing: border-box; } -
img和iframe虽支持box-sizing，但实际尺寸受 intrinsic size 主导，加了也基本不影响布局 -
svg元素（如<rect></rect>、<circle></circle>）根本不支持box-sizing，写了无效
在 flex/grid 布局中容易被忽略的细节
很多人以为用了 flex 或 grid 就不用管盒模型——错。子项的 flex-basis、grid-template-columns 等尺寸计算，依然基于其自身的 box-sizing 解析结果。
- 若一个
flex-item是content-box，width: 100px+padding: 12px会导致它实际占位 124px，破坏等分逻辑 - 用
fr单位时看似“自动分配”，但初始尺寸仍由box-sizing决定；border-box 下更易预测最终宽度 - 别指望
container类能兜底——它只控制max-width，不改变内部元素的盒模型解析方式
真正起效的不是某一行代码，而是 html 元素上那个 box-sizing: border-box 锚点，以及所有伪元素是否被拉进同一继承链。漏掉 <em>::before</em> 或 ::after，就等于留了个 content-box 的后门。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
