IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《CSS重置对盒模型的影响及默认边距清除详解》，聊聊，我们一起来看看吧！

默认 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 使用时：