不设 box-sizing: border-box，width 不含 padding 和 border，导致实际尺寸溢出；normalize.css 等不包含该声明，必须显式添加 , ::before, *::after { box-sizing: border-box; } 并置于样式最前。
不设 box-sizing: border-box，你写的 width: 100% 或 width: 200px 就不是它实际占的宽度——padding 和 border 会偷偷加在外面，布局错位、溢出、换行全是它惹的祸。
为什么重置样式里不能只靠 normalize.css 或 modern-normalize
CSS 重置的目标是消除浏览器默认样式差异，而 box-sizing 是开发者主动选择的尺寸模型，不是“默认行为”范畴。normalize.css（包括 v8+）至今未包含全局 box-sizing 声明；modern-normalize 同样不设。它们保留了浏览器原生的 content-box，等于把盒模型控制权交还给每个开发者——但没人手动加，就等于没控。
- 第三方 UI 库（如 Ant Design v4、Vant）可能自己重置了
box-sizing，但只覆盖组件内部元素，漏掉::before/::after或自定义 wrapper - 某些 reset 变体（如 older Eric Meyer Reset）甚至显式写了
* { box-sizing: content-box }，直接冲突 - 你引入了 Tailwind？它默认开
border-box，但若项目里混用原生 CSS 或其他框架，优先级一乱，box-sizing就被覆盖回content-box
伪元素 ::before / ::after 必须显式包含
伪元素不继承父级 box-sizing，默认仍是 content-box。你写了 * { box-sizing: border-box }，但 ::before 画的下拉箭头、遮罩层、装饰边框仍按内容宽 + padding + border 算，结果就是容器看着没溢出，实际内部撑开几像素，导致换行、定位偏移、滚动条意外出现。
- 正确写法只有一种：
*, *::before, *::after { box-sizing: border-box; } - 这条规则必须放在所有自定义样式之前，否则会被后续声明（比如第三方库的
!important）覆盖 - DevTools 的 Computed 面板里搜
box-sizing，确认目标伪元素值确实是border-box，别信“写了就生效”
表单控件 input / textarea / select 必须单独加固
这些元素在不同浏览器中默认 box-sizing 不一致：input[type="search"] 在 Safari 中默认是 content-box，哪怕父级设了 border-box 也不生效；某些安卓 WebView 中 textarea 仍按 content-box 渲染。移动端小屏对像素误差更敏感，差 2px 就可能触发横向滚动条。
立即学习“前端免费学习笔记（深入）”；
- 不能只靠全局
*：某些框架或重置 CSS 会用更高优先级覆盖它 - 稳妥做法是追加：
input, textarea, select { box-sizing: border-box; } - 配合
max-width: 100%和width: 100%双保险，防极端缩放或键盘弹出时视口压缩
Flex/Grid 容器里 box-sizing 失效的典型误判
不是 box-sizing 失效，而是你忘了它只管单个元素的宽高计算，不管父容器是否“撑开”。常见坑：
- 父容器
display: flex且未设flex-wrap: wrap，子项width: 33.333%+padding→ 即使border-box也救不了，总和超 100% 就必然溢出 - 子项用了
min-width: 200px，断点缩小后该值大于33.333%，此时box-sizing再准也没用，宽度由min-width主导 - 嵌套 flex 容器里，内层子项设了
width: 100%，但外层没设box-sizing: border-box，外层padding仍会让内层100%超出
真正容易被忽略的是：box-sizing 只改 width/height 的计算逻辑，它不碰 margin，也不修复父容器塌陷或相邻 margin 合并——这些得靠别的手段处理。你得清楚自己是在控制“盒子边界”，还是在协调“盒子之间关系”。
