全局设置box-sizing: border-box能避免布局错位，因它将padding和border计入width/height，使尺寸可控；*, *::before, *::after不可省略，因伪元素不继承box-sizing，需显式声明；该设置简化js测量，但svg、iframe及shadow dom内需注意例外。
为什么全局设置box-sizing: border-box能避免布局错位
因为默认的 content-box 模式下，width 和 height 不含 padding 和 border，只要加了内边距或边框，元素实际尺寸就超出预期——两个 width: 50% 的盒子加了 padding 就会换行；width: 100% 的输入框加 padding 就会溢出父容器。而 border-box 把这些都算进设定值里，尺寸可控。
*, *::before, *::after 这个重置写法为什么不能省略伪元素
伪元素（比如 ::before、::after）是独立渲染节点，不继承父元素的 box-sizing，如果只写 *，它们仍走默认的 content-box，容易在用伪元素做装饰、遮罩或图标时出现尺寸偏差。常见表现是：按钮上的伪元素边框撑开容器、卡片阴影层错位、进度条伪元素宽度计算异常。
-
*只覆盖普通元素，不覆盖伪元素 -
*::before, *::after必须显式声明，否则它们的width仍按内容区计算 - 某些 UI 库（如 Bootstrap 5+）已内置该写法，但自建项目必须手动补全
全局设 border-box 对 JavaScript 测量的影响
offsetWidth 和 offsetHeight 返回的是元素实际占位尺寸，在 border-box 下等于你写的 width 值（含 padding 和 border），而在 content-box 下则需要手动加回去。这意味着：动态计算布局、拖拽缩放、Canvas 绘图适配时，代码更简洁、容错更强。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 无需再写
el.offsetWidth - parseInt(getComputedStyle(el).paddingLeft) - ... -
getBoundingClientRect()结果与 CSS 设定值一致，调试更直观 - 第三方库（如 Popper.js、Swiper）内部依赖这类测量，
border-box能减少兼容性 patch
哪些场景下 border-box 反而要慎用或局部还原
极少数情况需要保持 content-box，比如精确控制 SVG 内嵌元素的内容区域、某些 Canvas 容器需严格按 content 尺寸初始化、或对接遗留系统中硬编码了 content-box 计算逻辑的 JS 模块。但这些属于例外，不是默认行为。
- SVG 的
<rect></rect>、<circle></circle>等原生元素不受 CSSbox-sizing影响，无需处理 - 若用
iframe嵌入外部页面，其内部盒模型由对方控制，无法通过父级重置 - 个别老版本 Android WebView 对
*::after全局重置有渲染 bug，可降级为html { box-sizing: border-box; }+ 手动给关键组件加
真正容易被忽略的是：即使写了全局重置，iframe 里的样式、shadow DOM 内部、以及通过 document.createElement 动态插入的元素，都可能绕过该规则——得靠组件封装或构建时注入来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
