CSSReset为何影响盒模型？边距重置解析

CSS Reset 并不会改变浏览器默认的 content-box 盒模型，反而会放大因 width、padding 和 border 共同作用导致的尺寸计算偏差；它清除了原生元素的 margin 和 padding，却让 box-sizing 的默认行为（尤其是未被 * 选择器覆盖的 ::before/::after 伪元素）暴露为布局隐患，因此必须显式重置所有元素及伪元素的 box-sizing 为 border-box，并系统性地重新定义语义化间距——与其使用激进的全盘重置，不如采用 normalize.css 这类更理性、兼容性更强的方案，在保留 HTML 语义结构和跨浏览器一致性的同时，避免陷入“重置后反而更难控制”的陷阱。

css reset 本身不改盒模型，但会暴露 box-sizing 默认值问题

很多人以为 * { margin: 0; padding: 0 } 这类 reset 一加上，布局就“干净”了——其实它只清掉了外边距和内边距，完全没碰 box-sizing。浏览器原生默认仍是 content-box，也就是说：width: 200px; padding: 10px; border: 1px 的元素，实际占宽是 222px。reset 后你反而更容易踩坑，因为“视觉预期”和“真实尺寸”差距被放大了。

• reset 清掉

  的 margin: 1em 0，但没改它的 box-sizing，所以后续加 padding 时仍按 content-box 算

• 你手动写 width: 100% 的卡片，又加 padding: 16px，结果溢出父容器——这不是 bug，是 content-box 的标准行为
• 伪元素（::before/::after）也继承 content-box，漏掉它们会导致装饰性边框/阴影计算错误

必须显式设置 *::before, *::after { box-sizing: border-box }

只写 * { box-sizing: border-box } 是不够的。CSS 规范中，伪元素不被 * 选择器匹配，它们仍走默认的 content-box。一旦你用伪元素画三角、做加载动画或模拟边框，尺寸就会“多出来”几像素，尤其在 flex/grid 容器里容易触发换行或错位。

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

• 这条规则必须放在所有 reset 样式之后（否则被覆盖），且建议紧贴