现代CSS重置库普遍设box-sizing: border-box，是因为content-box下width/height仅含内容区，padding和border会额外叠加导致溢出、换行等布局错位；必须用, ::before, *::after全局重置并显式声明表单控件，否则伪元素和input等仍按content-box计算，引发响应式与组件化场景下的尺寸失控。
现代 CSS 重置样式库普遍设 box-sizing: border-box，是因为不这么干，width 和 height 就不是你写的那个数——padding 和 border 会偷偷加在外面，布局立刻错位、溢出、换行，尤其在响应式和组件化场景下根本没法控。
content-box 的“宽度失真”在业务中具体怎么翻车
浏览器默认用 content-box，意味着你写 width: 200px，它只管内容区；再加 padding: 12px 和 border: 1px，实际占宽变成 200 + 24 + 2 = 226px。这在真实项目里直接触发以下问题：
- 两个
width: 50%的卡片并排，只要其中一个有 padding 或 border，总宽超 100%，强制换行 -
input[type="text"] { width: 100%; padding: 8px; }在移动端必溢出，iOS Safari 弹出键盘时横向滚动条秒现 - Flex 容器里一个
flex: 1的卡片加了padding: 16px，内容区被压缩到负宽度，文字截断或折叠 - 设计稿标注「按钮宽 120px」，你照着写却发现它实际占 136px，还原误差肉眼可见
为什么重置必须包含 *::before 和 *::after
伪元素不继承父级 box-sizing，默认仍是 content-box。很多 UI 组件靠 ::before 画三角、遮罩、装饰边框，一旦尺寸算错，视觉就崩了——比如下拉菜单的箭头偏移、卡片阴影错位、清浮动失效。
- 只写
* { box-sizing: border-box; }，DevTools 的 Computed 面板里查::before，box-sizing值仍是content-box - Safari 和旧版 Chrome 中，未显式声明的伪元素可能意外撑开容器，导致 margin collapse 异常或 flex 换行
- 第三方 UI 库（如 Ant Design）通常只作用于自己的 class，不会覆盖你全局的伪元素规则，所以必须手动带上
表单控件为什么不能靠通配符“躺赢”
input、textarea、select 在不同浏览器中默认 box-sizing 不一致：Safari 的 input[type="search"] 默认是 content-box，某些安卓 WebView 中 textarea 也不继承，通配符根本压不住。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
input, textarea, select, button { box-sizing: border-box; }，不能省 - 旧版 Safari（≤12）和部分 Android WebView 还要配合
-webkit-appearance: none缓解渲染异常 - 即使用了 Normalize.css，它也不设
box-sizing，只修语义差异（比如sub基线），你仍得自己补
flex/grid 里 box-sizing 还重要吗
重要，但它不控制排列逻辑，只决定子元素内部尺寸是否“守规矩”。比如一个 flex: 1 的卡片，若它是 content-box 且带 padding: 16px，内容区宽度 = 容器分配宽 − 32px；设成 border-box，内容区就刚好填满分配宽。
- Flex 项写了
flex-basis: 200px又加了padding，content-box下最小宽度可能意外超出父容器，触发换行 - Grid 单元格内嵌了一个
width: 100%的子元素，如果外层容器没设border-box，它的左右padding仍会让子元素超限 - 调试时别只看 Styles 面板，要去 Computed 面板确认
width和 “Computed Width” 是否一致
真正容易被忽略的是：box-sizing 只改单个元素的宽高计算逻辑，它不管 margin 合并、父容器塌陷、flex-wrap 换行——这些得靠别的手段处理。你得清楚自己是在锁死“盒子边界”，还是在协调“盒子之间关系”。
