默认 box-sizing 仍为 content-box，需手动设置、::before、*::after 为 border-box 并置于 reset 后；同时 reset 清除 margin/padding 后须重定义语义元素间距与行内元素表现。

box-sizing 默认值在 reset 后仍为 content-box

多数 CSS reset（如 normalize.css 或经典 Eric Meyer Reset）会重置 margin 和 padding 为 0，但 ** 不会修改 box-sizing 的默认行为 **。这意味着所有元素依然使用 content-box，即宽度 / 高度仅包含内容区，不包含内边距和边框。

这容易导致布局错位：比如你设了 width: 200px; padding: 10px; border: 1px solid，实际占用宽度是 200 + 20 + 2 = 222px，而开发者常误以为就是 200px。

• reset 只清样式，不改盒模型语义
• box-sizing 是独立 CSS 属性，需显式设置
• 现代 reset（如 modern-normalize）也不自动设 box-sizing: border-box

为什么 reset 后还要手动加 box-sizing: border-box

因为 浏览器 原生默认就是 content-box，reset 不会、也不该越界去覆盖这个底层渲染逻辑。要统一盒模型行为，必须主动声明：

*, *::before, *::after {box-sizing: border-box;}

这条规则必须写在 reset 样式之后（否则被覆盖），且建议放在 :root 或全局样式最顶部。

立即学习 “ 前端免费学习笔记（深入）”；

• 若用 postcss-preset-env 等 工具，它不会自动注入该规则
• 某些 UI 库（如 Bootstrap 5）自己写了 border-box，但仅限其组件内部 作用域
• 漏掉 *::before, *::after 会导致 伪元素 仍按 content-box 计算，引发意外溢出

margin 和 padding 清零后，行内元素表现更敏感

reset 把 margin 和 padding 设为 0 后，、、 等行内元素的垂直对齐和行高会更“裸露”，尤其在配合 line-height 或 vertical-align 使用时：

• 原本可能有浏览器默认 margin 缓冲，清零后紧贴文字基线，易出现锯齿感
• 虽是替换元素，但部分浏览器对其 padding 有隐式处理，reset 后需重新补足
• 表格单元格（ ）的 padding 被清零后，内容会贴边，必须手动加回

  兼容性与性能小提醒

  box-sizing: border-box 在 IE8+ 完全支持，无需前缀；但注意：

  • 旧版 Android Browser（4.3 及以下）对 *::before, *::after 的 box-sizing 支持不稳定，生产环境若需兼容，可改用类选择器局部控制
  • 全局通配符 * 在超大 DOM 下有轻微性能影响，但对现代设备基本可忽略
  • reset 清除 margin/padding 后，别忘了给

    、

    等语义元素重新定义视觉间距——否则整页文字会挤成一团

  真正麻烦的不是 reset 本身，而是 reset 后忘记重建「视觉节奏」和「盒模型预期」。这两处不补，再好的 reset 也只是一张白纸。