Normalize css 和 Reset css 之间的区别是什么？

Normalize.css 和 Reset.css 都是CSS工具，旨在提供一致的跨浏览器默认样式。它们的主要目的是消除不同浏览器之间的默认样式差异，从而简化设计师和开发人员的工作。不过，它们在实现这一目标的方法和理念上存在一些差异：

Normalize.css

• 目标：Normalize.css 的目标是使浏览器的默认样式更加一致，并保留有用的默认值。而不是去除所有的样式，它会修复浏览器之间的差异，并保持良好的可用性。
• 保留样式：它保留了有用的默认样式，而不是“抹除”所有样式。例如，sup 或 sub 元素在不同浏览器中会有不同的渲染方式，normalize.css 会统一这些样式，但保留它们的基本功能。
• 修复浏览器的bug：它修复了常见的桌面和移动浏览器的bug，如HTML5元素的显示、预格式化文本的显示等。
• 模块化：通常来说，normalize.css 可以用作模块化的基础，可以在其上添加其他样式。

Reset.css

• 目标：Reset.css 的目的是去除所有的浏览器默认样式，为设计提供一个干净的画布。它通过为几乎所有元素提供统一的样式（如margin, padding设为0）来实现这一点。
• 去除样式：它倾向于“归零”所有的样式，这意味着设计师需要重新定义大量的样式。
• 一致性：它的核心理念是消除差异，确保所有元素在不同浏览器中看起来是一致的，尽管这样做也涵盖了将有用的默认样式归零。
• 定制需要：当使用reset.css时，开发者通常需要在其基础上定制大量的CSS规则以获得期望的外观。

实际例子

假设你正在处理一个列表元素 <ul>：

• 使用 Reset.css，所有的 <ul> 列表样式（包括内边距和项目符号）都会被移除，你需要手动为每个列表添加样式。
• 使用 Normalize.css，默认的列表样式将会被一致化，但基本的项目符号和缩进将会被保留，这意味着你只需要定义具体的列表样式，而不是重新构建整个列表的样式。

在选择使用哪一个的时候，一般会根据项目需求和个人喜好来决定。如果你希望完全控制每一个元素并且乐意从零开始构建你的样式，你可能会倾向于使用Reset.css。如果你希望保留一些默认样式，并且优先考虑跨浏览器的一致性，那么Normalize.css可能是更好的选择。

主要区别是：

1. Normalize.css 保留有用的默认值，而不是“取消样式化”所有内容。**例如，诸如 sup或 sub“正常工作”之类的元素在包含 normalize.css 后（并且实际上变得更加健壮），而在包含 reset.css 后它们在视觉上与普通文本没有区别。因此，normalize.css 不会给您强加视觉起点（同质性）。这可能不符合每个人的口味。最好的办法是尝试两者，看看哪种适合您的喜好。
2. Normalize.css 纠正了一些超出 Reset.css 范围的常见错误。font它的范围比reset.css更广泛，并且还提供了常见问题的错误修复，例如：HTML5元素的显示设置、表单元素缺乏继承、更正 font-size渲染 pre、IE9中的SVG溢出以及 buttoniOS中的样式错误。
3. **Normalize.css 不会扰乱您的开发工具。**使用reset.css时，一个常见的问题是浏览器CSS调试工具中显示的大型继承链。由于有针对性的样式，这对于 normalize.css 来说不是一个问题。
4. **Normalize.css 更加模块化。**该项目被分解为相对独立的部分，如果您知道您的网站永远不需要这些部分（例如表单规范化），那么您可以轻松地删除它们。
5. Normalize.css 有更好的文档。 Normalize.css 代码内联且更全面地记录在GitHub Wiki中。这意味着您可以找出每行代码的作用、为什么包含它、浏览器之间的差异是什么，并且更轻松地运行您自己的测试。该项目旨在帮助人们了解浏览器默认如何渲染元素，并使他们更容易参与提交改进。

主要区别在于：

• CSS 重置的目的是_删除_所有内置的浏览器样式。 H1-6、p、strong、em 等标准元素最终看起来完全一样，根本没有任何装饰。然后你应该自己添加_所有装饰_。

• 规范化 CSS旨在使内置浏览器样式在各个浏览器之间_保持一致_。像 H1-6 这样的元素将在浏览器中以一致的方式显示为粗体、更大等。然后，您应该仅添加设计所需的装饰_差异。_

如果您的设计_a)遵循排版等的常见约定，并且_b) Normalize.css 适用于您的目标受众，那么使用 Normalize.CSS 而不是 CSS 重置将使您自己的 CSS 更小且编写速度更快。

Normalize.css 主要是一组样式，基于其作者认为好看的样式，并使其在浏览器中看起来一致。重置基本上会从元素中剥离样式，以便您可以更好地控制所有内容的样式。

我两者都用。

有些样式来自 Reset，有些来自 Normalize.css。例如，在 Normalize.css 中，有一种样式可确保所有输入元素具有相同的字体，而这种情况不会发生（在文本输入和文本区域之间）。 Reset 没有这样的样式，因此输入具有不同的字体，这通常是不需要的。

从描述来看，它似乎试图使用户代理的默认样式在所有浏览器中保持一致，而不是像重置那样剥离所有默认样式。

与许多 CSS 重置不同，保留有用的默认值。

首先reset.css是您可以使用的最糟糕的库，因为它删除了 HTML 的标准结构，并在将边距填充和其他属性的值分配给0.例如，您会发现<H1>, 将与 相同<H6>。

另一方面Normalize.css使用标准结构并修复了其中存在的几乎所有错误。例如，它解决了从一个浏览器向另一个浏览器显示表单的问题。 Normalize 通过修改此功能来修复此问题，以便您的元素在所有浏览器上显示相同。

Normalize.css 和 Reset CSS 是两种不同的CSS工具，它们的目标都是解决跨浏览器的一致性问题，但它们各自的方法和目的有所不同。

Reset CSS 的目的是通过消除浏览器默认的所有样式来提供一个统一的基线。这样做意味着所有的HTML元素开始时都没有装饰，确保了在不同的浏览器中展现的一致性。使用Reset CSS可以使开发者不受浏览器默认样式的干扰，从零开始构建设计。Reset CSS的一个典型代表是Eric Meyer的“Reset CSS”，它移除了边距、内填充、字体大小和其它样式。

例如，Reset CSS可能包含以下规则来移除元素的边距和内填充：

css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

相比之下，Normalize.css 采取了不同的方法。其目的是保持浏览器的默认样式，但同时纠正了常见的跨浏览器不一致性和修复了常见的bug。Normalize.css 意在保留有用的默认值，而不是去掉所有的默认值。它也会根据具体的元素微调样式，以确保在不同浏览器中呈现出相似的视觉效果。

例如，Normalize.css 可能包含规则来统一不同浏览器的默认样式，而不是完全去除它们：

css
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

body {
  line-height: 1.6;
  font-family: sans-serif;
}

ol,
ul {
  list-style: none;
}

总而言之，Reset CSS是为了从一个完全一致的空白画布开始，而Normalize.css是为了在不同浏览器之间保持一致性的同时保留有用的默认样式。选择使用哪一个工具取决于你的项目需求和个人偏好。