直接设 margin: 0 和 padding: 0 不够用,因为浏览器对 font-size、font-weight、border、appearance 等属性的默认值也存在差异;all: unset 不推荐全局使用,会破坏 display、cursor、font 等关键渲染属性;实用策略是选择性归零+显式声明,或采用 normalize.css 进行语义化校准。

为什么直接设 margin: 0 和 padding: 0 不够用
因为不同浏览器对元素的默认样式定义差异不止是外边距和内边距。比如 在 Chrome 中默认有 font-size: 2em、font-weight: bold,而 Firefox 可能还加了额外的 margin-block-start; 在 Safari 下有默认阴影和圆角, 的 border 和 font-family 也各不相同。只清 margin/padding 会漏掉这些隐性差异。
推荐用 * { all: unset } 吗
不推荐在全局使用。虽然 all: unset 能一键清除所有继承与非继承属性,但它会把 display、unicode-bidi、direction 这些基础渲染属性也干掉,导致文本方向错乱、块级元素变 inline、表单控件无法点击等严重问题。它适合局部重置(如封装一个自定义组件根节点),不适合 html 或 body 级别。
-
all: unset会重置display,变成display: inline- 会清空
cursor,失去手型光标font相关属性全丢,文字可能缩成一团或不可读真正实用的重置策略:选择性归零 + 显式声明
用
reset.css类方案,但避免过度重置。核心是:只处理已知有差异的属性,且为关键元素显式设值。- 对
body、h1–h6、p、ul、ol、dl、pre、form、fieldset、legend、button、input、textarea、select这些「高风险」元素单独写规则 - 统一设
margin: 0、padding: 0、border: 0、font-size: 100%、font-family: inherit - 对
button和input[type="button"]额外加appearance: none消除原生样式 - 用
box-sizing: border-box统一盒模型(建议放在*::before, *::after里)
现代项目更推荐
normalize.css而不是重置normalize.css不是清空,而是“校准”:保留有用的默认行为(如标题层级、列表缩进、焦点轮廓),只修正跨浏览器 bug 和不一致点。比如它会让在所有浏览器中保持小号字体,修复在 IE 中的隐藏问题,保留的等宽字体——这些是重置方案主动丢掉的合理语义。立即学习“前端免费学习笔记(深入)”;
- 它不破坏表单控件的可访问性(如
focus样式仍存在) - 对 HTML5 新标签(
、)提供默认display值 - 源码注释清晰,每条规则都标明修复的是哪个浏览器的哪个问题
如果你的项目需要兼顾语义、可访问性和开发效率,
normalize.css是比暴力重置更可持续的选择。真正的难点不在“怎么清”,而在“哪些该留、哪些该调”。 - 会清空










