99%的宽高计算不准源于未统一设box-sizing为border-box；须用,::before,*::after{box-sizing:border-box}全局声明，并置于CSS最顶部，JS中获取实际占位宽应使用getBoundingClientRect().width。
直接上结论：99% 的宽高计算不准，根源是没把 box-sizing 统一设成 border-box；只改局部或漏掉伪元素，等于白改。
为什么 width: 100% 还会溢出容器
浏览器默认用 content-box：你写 width: 100%，它只管内容区；padding: 8px 和 border: 1px 会额外加在两边。父容器没留余量时，子项立刻撑破、换行、错格。
- 常见于表单控件——
input默认有padding和border，width: 100%几乎从不准确 - Flex/Grid 子项设了
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
