box-sizing: border-box 能让 width/height 表示总宽高，避免 padding/border 导致溢出；需通过 、::before、*::after 全局重置以穿透继承，否则伪元素等仍用 content-box。
直接用 box-sizing: border-box 全局重置，就能让所有元素按怪异盒模型计算，彻底避开标准模型下 width/height 不含 padding/border 带来的尺寸失控问题。
为什么默认的 content-box 容易出错
浏览器默认用 content-box，意味着你写 width: 200px，实际占位是 200px + 左右 padding + 左右 border。这在响应式布局、栅格系统、flex 子项等场景里极易导致溢出或错位。
- 给一个
width: 100%的卡片加padding: 16px和border: 1px，它立刻超出父容器 - 多个
flex: 1的子项因 padding/border 累加，无法均分容器宽度 - 媒体查询中基于宽度的断点失效——因为你算的是 content 宽，但真实占用远不止
box-sizing: border-box 怎么用才真正生效
只对单个元素设 box-sizing: border-box 没用，必须从根节点开始「穿透式重置」，否则子元素仍继承默认的 content-box。
- 全局重置推荐写法：
*, *::before, *::after { box-sizing: border-box; } - 不建议只写
* { box-sizing: border-box; }—— 伪元素（如::before）若生成内容并设置宽高，会因未被覆盖而回归content-box - 某些第三方组件（如旧版 Bootstrap）可能显式覆盖了
box-sizing，需检查 computed 样式确认最终值
border-box 下的 width/height 含义变了，要注意什么
启用后，width 和 height 表示「内容区 + padding + border」的总和，内容实际可用空间要手动减出来。
- 想让文字区域正好是 200×100，不能直接写
width: 200px; height: 100px;，得预留 padding/border：.input { width: 200px; padding: 12px; border: 1px solid #ccc; } /* 内容区实际宽 = 200 - 24 - 2 = 174px */ - 百分比宽度（如
width: 50%）仍按父容器计算，但内部 padding/border 会压缩内容，不是“撑开”父容器 -
min-width/max-width也按 border-box 规则解释，即包含 padding 和 border
真正麻烦的不是切换模型本身，而是团队协作时有人忘了重置，或者引入的 UI 库悄悄覆盖了 box-sizing —— 最稳妥的做法，是在项目初始化 CSS 中强制重置，并在代码审查时把漏掉的 box-sizing 当作 lint 错误处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
