需使用CSS Reset统一浏览器默认样式差异，推荐Normalize.css而非传统Reset，因其保留有用默认样式、修复跨浏览器bug且轻量；再配合box-sizing等自定义重置提升开发体验。
不同浏览器对HTML元素有各自的默认样式（比如 margin、padding、字体大小、列表缩进等），这会导致同一份CSS在Chrome、Firefox、Safari、Edge甚至旧版IE中渲染效果不一致。解决的核心思路是：**先清空浏览器默认样式，再统一定义**——这就是“CSS Reset”的作用。
为什么需要 Reset CSS 而不是直接写样式？
不重置的话，你可能遇到这些情况：
-
段落间距错乱：Chrome 给
p默认上下边距20px，Firefox 可能是16px； -
按钮/输入框高度不一：
input和button的行高、内边距、边框在各浏览器中差异明显； -
列表项缩进混乱：
ul/ol的左边距和项目符号位置不统一； -
标题字体粗细/大小浮动：
h1–h6的默认font-weight和font-size各有偏好。
推荐用 Normalize.css（比传统 Reset 更现代）
传统 Reset（如 Eric Meyer’s Reset）会把所有元素样式设为 0 或 none，过于激进，反而丢失了有用的默认行为（如表单控件的可访问性样式）。Normalize.css 是更优选择：
- 保留有意义的默认样式（比如
strong加粗、blockquote缩进）； - 修复跨浏览器 bug（如 iOS Safari 中的点击高亮、Firefox 中的表单聚焦轮廓）；
- 文档清晰，每条规则都有注释说明“为什么这样写”；
- 轻量（压缩后仅约2KB），支持主流现代浏览器及 IE9+。
使用方式很简单：在你自己的CSS文件之前引入：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="normalize.min.css">
配合现代布局习惯做轻量自定义重置
Normalize 解决了兼容性基础，但你还可加一段简短的“自定义重置”，让开发更顺手：
-
统一盒模型：全局设置
box-sizing: border-box，避免 padding 撑开宽度； -
移除默认轮廓干扰：给
:focus元素统一加可访问的聚焦样式，而不是直接outline: none； - 字体继承简化：让表单元素、代码块等自动继承父级字体，减少重复声明；
-
图片默认垂直对齐：
img { vertical-align: middle; }避免基线留白。
示例片段（放在 Normalize 之后、业务CSS之前）：
*, *::before, *::after { box-sizing: border-box; }body { line-height: 1.5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
img { max-width: 100%; height: auto; vertical-align: middle; }
input, button, select, textarea { font: inherit; }
别忘了测试与渐进增强
Reset 只是起点，不是终点：
- 在目标浏览器（尤其是你产品真实用户常用的版本）中手动点检关键页面；
- 用开发者工具对比 computed styles，确认
margin、padding、line-height是否真正一致； - 对老版本浏览器（如 IE11），可配合 Autoprefixer + postcss-preset-env 自动补全前缀和特性降级；
- 避免过度依赖 Reset 掩盖结构性问题——语义化HTML、合理嵌套、BEM类命名，才能让样式真正稳定。
