必须显式声明 *, *::before, *::after { box-sizing: border-box; }，因为伪元素不继承 box-sizing，仅 * 无法匹配 ::before/::after，导致装饰边框、箭头等按 content-box 计算而错位；该规则须置于 css 最顶部，避免被覆盖。
为什么*不等于全部元素
写* { box-sizing: border-box; }看似覆盖所有元素，但::before和::after伪元素根本不会被匹配——它们不是“元素”，而是生成内容。漏掉它们，用::before画的装饰边框、三角箭头、图标背景等，依然按content-box计算，多出几像素，在flex容器里直接换行或错位。
必须显式加上：*, *::before, *::after { box-sizing: border-box; }
别用inherit替代：IE8–不支持，且根节点没设border-box时会回退到content-box，等于白写。
这条规则该放在哪儿
它得紧贴<style></style>开头，或放在所有自定义样式之前。否则后面某处写了.card { box-sizing: content-box; }，整条规则就被覆盖了——尤其第三方 UI 库（如旧版 Ant Design）常带!important，你得靠更具体的选择器才能压住。
常见错误位置：
- 放在 normalize.css 之后但又在组件样式之前 → 被组件样式覆盖
- 写在 CSS 文件末尾 → 白写了
- 只写在某个局部
<style></style>块里 → 全局无效
重置box-sizing不等于清空margin/padding
box-sizing只管尺寸怎么算，不管默认值是多少。浏览器给body加了margin: 8px，给p加了margin: 1em 0，这些 UA 样式不会因为你设了border-box就消失。
所以：
- 别用
* { margin: 0; padding: 0; }一刀切——它会让button和input失去原生内边距，点击热区变小、文字贴边
- 真正要的是语义化重定义：
p { margin-bottom: 1.2rem; }、h2 { margin-bottom: 0.8rem; }
- 卡片类组件用
padding控制内部呼吸感，卡片之间用margin控制组合间距，职责不能混
第三方组件怎么办
全局设border-box后，Ant Design、Element Plus 这类库的表单控件可能布局错乱——它们部分依赖content-box行为。
解决方案不是关掉全局设置，而是隔离还原：.ant-input-wrapper *, .el-input__inner { box-sizing: content-box !important; }
关键点：
- 只对已知问题组件的根容器加 wrapper class，比如
<div class="third-party-form">...</div>
- 还原范围要窄：
.third-party-form * { box-sizing: content-box !important; }太暴力，容易误伤内部自定义子元素
- 避免在动画元素上动态切换
box-sizing——它触发同步 layout，滚动卡顿、动画掉帧
最常被忽略的细节：伪元素没覆盖、顺序放错、第三方样式没隔离、误以为box-sizing能代替语义间距设计。这四点踩中任意一个，布局就不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
