99%的宽高计算不准源于未全局设box-sizing为border-box；须用, ::before, *::after{box-sizing:border-box}置于css最顶部，js获取实际宽应使用getboundingclientrect().width。
直接用 box-sizing: border-box 就能解决——但只写这一行，90% 的项目依然会撑破，因为没覆盖关键节点。
为什么只给父容器设 box-sizing: border-box 没用
它只改自己，不传染子元素。比如父容器宽 300px，子元素写 width: 100% + padding: 12px + border: 1px solid，若子元素仍是 content-box，实际宽度就是 300 + 24 + 2 = 326px。
- 常见翻车点：
input、textarea、button这些表单控件默认自带 padding/border，且多数 UI 库不会重置它们的box-sizing - 伪元素（如
::before）完全不继承*的声明，清除浮动或图标装饰时悄悄溢出 - Flex 子项里嵌了个
div，你只重置了外层，内层仍按 content-box 算尺寸
真正生效的写法必须包含伪元素
只写 * { box-sizing: border-box; } 是无效的。必须显式带上伪元素选择器，否则它们照常按默认 content-box 计算。
- 正确写法（放在所有 CSS 最顶部）：
*, *::before, *::after { box-sizing: border-box; } - 不要用
html { box-sizing: border-box; }—— 它不向下继承，子元素还是 content-box - 某些旧版 Safari 或微信 X5 内核对伪元素支持不稳定，可兜底加
html { box-sizing: border-box; }，但不能替代通配符写法
哪些地方 box-sizing: border-box 压根不起作用
它只管 width/height 如何分配 padding 和 border，不处理内容本身是否溢出。
-
img、svg、iframe：无视box-sizing，必须额外加max-width: 100%和height: auto - Flex 子项中的表单控件：即使
box-sizing正确，min-width: auto也会阻止收缩，得加min-width: 0 - 表格（
table、td）：默认忽略box-sizing，需显式声明box-sizing: border-box才生效 -
white-space: nowrap的文本：box-sizing不影响换行逻辑，得配overflow: hidden或text-overflow: ellipsis
最常被忽略的是：开发者工具里看到元素总宽“刚好”等于父容器，但页面仍有横向滚动条——大概率是某个未重置的伪元素、img 或 Flex 子项在后台悄悄撑开了边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
