默认 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 也只是一张白纸。
- 旧版 Android Browser(4.3 及以下)对










