99%的盒子尺寸计算错误源于未统一设置box-sizing为border-box；必须全局重置*, *::before, *::after并置于css最顶部，否则伪元素、第三方库或动态节点会失效。
99% 的盒子尺寸计算错误，根源是没把 box-sizing 统一设成 border-box；只改 * 不管伪元素、顺序放错位置、或被第三方库覆盖，都会让修复失效。
为什么 width: 100% 还会横向溢出
浏览器默认用 content-box：你写 width: 100%，它只分配内容区宽度；padding: 12px 和 border: 1px 会额外加在两边，总宽变成 100% + 24px + 2px。父容器没预留空间，子元素立刻撑破。
常见于：input、textarea 等表单控件（自带 padding/border）；Flex 子项设了 flex: 1 又加 padding；响应式断点提前触发（媒体查询里算的“宽度”没扣边框）。
- 验证方法：在 Chrome DevTools 的 “Computed” 面板点开盒模型图示，看四层尺寸是否叠加
- 不要靠调小
width补偿，那只是掩耳盗铃 - 别信“只对表单控件设
box-sizing就够了”，伪元素、动态插入节点、第三方组件都得兜住
全局重置必须包含伪元素且放最前
* 选择器不继承到 ::before 和 ::after，而它们常被用于清浮动、图标装饰、隐藏内容——一旦按 content-box 计算，就会悄悄撑破容器。
正确写法必须是：
*, *::before, *::after {
box-sizing: border-box;
}
这条规则要放在所有 CSS 文件最顶部，否则会被 Normalize.css、Ant Design、Element Plus 等 UI 库的样式覆盖。
- 检查开发者工具中目标元素的
box-sizing是否被划掉——被划掉说明优先级不够 - Shadow DOM 或 CSS-in-JS 里
*规则无法穿透，得在对应 scope 内重复声明 - IE8 需加
-ms-box-sizing: border-box（顺序不能错），但当前主流项目可省略前缀
JS 获取真实宽度时 getBoundingClientRect 才靠谱
getComputedStyle(element).width 返回的是你写的那个声明值，和当前 box-sizing 无关。哪怕你设了 border-box、padding: 10px、border: 2px，它也只读取你写的 width: 200px。
想获取渲染后实际占位宽度，必须用：
element.getBoundingClientRect().width
它已包含 padding、border、DPR 缩放，且实时反映布局结果。
-
offsetWidth在 Flex/Grid 场景下可能滞后于真实渲染 -
clientWidth不含border，但受overflow影响，不推荐用于精确测量 - 第三方组件（如图表库）内部若未设
border-box，其getBoundingClientRect()结果仍可能含意外边距
Flex/Grid 中 box-sizing 影响的是内容区，不是轨道划分
box-sizing 不改变 Flex 或 Grid 的分配逻辑，但它决定每个子项的 flex-basis 或 grid-template-columns 如何被解析。
例如：flex: 0 0 200px 的侧栏如果没设 border-box，又带 padding: 12px 和 border: 1px，实际占位就是 226px，可能挤垮整行。
- 侧栏推荐用
flex: 0 0 200px，中间栏用flex: 1，别混用width: 100% - 中间栏内部若有长单词或 URL，必须加
min-width: 0+overflow: hidden，否则默认min-width: auto会阻止收缩 - SVG 元素（
<rect></rect>、<circle></circle>）完全不支持box-sizing，尺寸永远按 content-based 计算
真正起效的不是“写了这一行”，而是它从 HTML 第一个字节开始就控制了每个新插入节点的尺寸逻辑——动态生成的元素、第三方组件、甚至 SVG 内嵌的 <foreignobject></foreignobject>，都得被这套规则兜住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
