CSS Reset/Normalize

粗暴的全局重置会干掉所有元素的默认边距，但也会移除 `<ul>` 的项目符号、`<h1>` 的加粗字号等浏览器自带的合理样式。本页对比的 reset 库（如 Normalize.css）会保留这些有用的默认样式，只修复跨浏览器不一致的地方。如果你只是做个简单落地页，`* { margin:0; padding:0 }` 够用；但做多页面产品或需要保留语义样式的项目，用 Normalize.css 能少写很多后补样式。

大概率是缺失 viewport meta 标签。reset 库只处理元素默认样式差异，不控制移动端视口缩放。在 `<head>` 里加上 `<meta name="viewport" content="width=device-width, initial-scale=1.0">` 后再引入 reset 代码，移动端的盒模型和字号才能按预期渲染。本工具生成的代码片段不含该 meta，需手动补上。

关键看项目类型。Normalize.css 保留浏览器默认语义样式（如 `h1` 字号、`strong` 加粗），只修复跨浏览器差异，适合从零搭建的 UI 组件库或需要保留 HTML 语义的项目。Reset.css 会清除所有浏览器默认样式，让你从完全空白的状态重写，适合设计稿极精细或需要完全自定义视觉的页面。本工具对比表里列出了两者对 `ol`、`table`、`button` 等 8 个常见元素的具体处理差异，可对照选。

部分 reset 库（如 Eric Meyer's Reset）会移除按钮的默认边框和背景渐变，让按钮变成纯色块，看起来像过时的设计。这其实是重置的预期行为——它把按钮降级为无样式的 `input`，方便你从头写统一的按钮样式。如果不希望按钮被重置，可以在引入 reset 后单独给 `button` 写 `border: inherit; background: ButtonFace;` 恢复系统默认外观。

可以，但建议做两步验证。一是确认你选的库版本（本工具默认使用各库最新的稳定版，页面顶部标注了版本号）。二是检查是否与你项目中已有的第三方 UI 框架（如 Bootstrap、Tailwind）冲突——这些框架自带 normalize，重复引入可能导致覆盖顺序混乱。稳妥做法：只保留一个 reset/normalize 来源，用本工具生成代码后，在浏览器开发者工具里检查 `body` 的 `line-height` 是否为预期值。

这是为了解决图片底部 3-5px 的空白间隙问题。默认 `img` 是 `inline` 元素，会受 `line-height` 影响产生额外空隙，改成 `block` 后间隙消失。但不是所有 reset 库都这么做——Normalize.css 保持 `inline`，而部分现代 reset（如 sanitize.css）会改成 `block`。本工具在对比表里标注了每个库对 `img` 的处理方式，如果布局里图片需要并排显示，选保持 `inline` 的库更方便。

reset 库不处理滚动条样式，这是浏览器自身的渲染差异。Chrome 默认用系统滚动条（较细），Safari 在 iOS 上隐藏滚动条、macOS 上显示较宽。如果想统一，需要额外写 CSS 自定义滚动条：`::-webkit-scrollbar { width: 8px; }`（仅 WebKit 内核支持）。本工具不生成滚动条样式代码，但可以在工具页面的「高级设置」区域手动粘贴这段 CSS。

本工具目前提供的是完整库的对比和一键复制，不支持逐条勾选规则。如果你只需要部分重置（比如只清除 `margin` 但保留 `list-style`），建议复制完整代码后手动删除不需要的规则。或者使用 PostCSS 插件（如 postcss-normalize）配合项目构建工具，它允许通过 `@import-normalize` 按需引入 Normalize.css 的特定模块。