在前端开发过程中，我们经常会使用 reset.css 和 normalize.css 来解决浏览器间的兼容性问题。这两个工具都是用来重置浏览器默认样式的，但它们的适用场景却有所不同。
reset.css 的适用场景
reset.css 利用 css 的继承性，将所有 html 标签的默认样式都设置成空，以达到将浏览器的默认样式完全重置的效果。这使得我们可以自由的定义并应用我们自己的样式，在各个浏览器中保持样式的一致性。
reset.css 适用于以下场景：
- 开发需要自定义样式的项目。在这种情况下，我们需要一个初始状态，从这个初始状态开始定义样式，而不是使用浏览器自带的默认样式。
- 对于只需要简单样式的静态网站或快速原型的项目。在这种情况下，我们不必非常关注样式的细节。
以下是一个简单的 reset.css 示例代码：
-- -------------------- ---- ------- -- ----- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- -
normalize.css 的适用场景
normalize.css 的目标是在不影响实际设计的前提下，尽可能的让不同浏览器的渲染结果尽量一致。它会修补一些浏览器自身的 bug，并对一些元素的样式进行重置和标准化，以确保在各个浏览器中呈现相似的视觉效果。
normalize.css 适用于以下场景：
- 使用 css 框架（如 Bootstrap、Foundation）。在这种情况下，我们需要确保框架中的样式在各个浏览器中都表现一致。
- 原型或测试网站。在这种情况下，我们希望不同浏览器看到的结果越接近越好，以便于测试和验证。
以下是一个简单的 normalize.css 示例代码：
-- -------------------- ---- ------- -- ------------- -- --- - -- ------------------ ---- - -- --------------- --- ----- - -- ------------ - -- ----------- -- -- --- ---- --------- -- ------- ---------------------------------------------------------------------------
总结
在选择 reset.css 和 normalize.css 之前，我们需要了解它们的适用场景。如果要自己定义项目的样式，或需要比较简单的静态网站或快速原型的项目，我们可以选择使用 reset.css；如果需要保证不同浏览器的渲染结果尽可能一致，或使用 css 框架时，我们可以选择使用 normalize.css。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/654380827d4982a6ebd4bede