99%的宽度计算不准源于未全局设置box-sizing: border-box；必须写**, *::before, *::after { box-sizing: border-box; }并置于css最顶部，且需在第三方库、shadow dom等作用域内重复声明。
99% 的宽度计算不准，直接原因是没把 box-sizing 全局设成 border-box；只改个别元素、漏掉伪元素、或被第三方库覆盖，都会让效果归零。
为什么 width: 100% 还是溢出？
浏览器默认用 content-box：你写 width: 100%，它只管内容区；padding: 8px 和 border: 1px 会额外加在两边。父容器没留余量时，子项立刻撑破、换行、错格。
- 表单控件（如
input）默认带padding和border，width: 100%几乎从不准确 - Flex 子项设了
flex-basis: 200px又带padding: 12px？实际占位是224px，整行可能被挤垮 - 响应式断点提前触发，往往是因为媒体查询里算的“宽度”没减去边框和内边距
*::before, *::after 必须显式声明
只写 * { box-sizing: border-box; } 是典型漏点。伪元素（比如清除浮动的 ::after、图标装饰的 ::before）不继承该声明，仍按 content-box 算，一不小心就撑破容器。
- 必须写全
* , *::before, *::after { box-sizing: border-box; } - 这条规则得放在所有 CSS 文件最顶部，否则会被 Normalize.css 或 Ant Design 等 UI 库覆盖
- 检查开发者工具中目标元素的
box-sizing值是否被划掉——被划掉说明优先级不够
JS 获取宽度时别混用 getComputedStyle 和 getBoundingClientRect
getComputedStyle(element).width 返回的永远是 content-box 语义下的内容区宽度，和当前 box-sizing 值无关。哪怕你设了 border-box、padding: 10px、border: 2px，它也只读取你写的那个 width 声明值。
- 想获取「当前生效的 CSS 宽度声明值」→用
getComputedStyle，仅适合调试或规则匹配 - 想获取「渲染后实际占位宽度」→必须用
element.getBoundingClientRect().width，它已包含padding、border、DPR 缩放 -
offsetWidth在 Flex/Grid 场景下可能滞后于真实渲染；clientWidth不含border，但受overflow影响
最容易被忽略的是：第三方组件库（如 Element Plus）常重置 box-sizing，而 Shadow DOM 或 CSS-in-JS 里 * 规则无法穿透作用域——得在对应 scope 内重复声明。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
