在前端开发中，CSS Reset 和 normalize.css 是常用的重置 CSS 样式的方式。两者在实现的方式和效果上有所不同，使用时需要慎重考虑。本文将介绍如何叠加使用 CSS Reset 和 normalize.css，以达到更好的重置样式效果。
什么是 CSS Reset
CSS Reset 是一种重置浏览器默认样式的方法，一般会将所有 HTML 元素的样式设置为一致，去除多余的边距和内边距，以便更好地进行页面布局。CSS Reset 最早是由 Eric Meyer 创建并命名的。
以下是一个简单的 CSS Reset：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}上述代码中，* 表示通配符，将所有元素的 margin 和 padding 都设置为 0，box-sizing 设置为 border-box，这是一种更好的盒模型，可以避免 margin 和 padding 对元素大小的影响。body 为所有网页中最基本、最通用的元素，这里将其字体设置为 Arial，sans-serif 为字体的后备方案。
什么是 normalize.css
normalize.css 是一种更为温和的重置浏览器默认样式的方法，其目的是消灭不同浏览器之间的差异。normalize.css 不会像 CSS Reset 那样将所有 HTML 元素的样式重置为一致，而是针对不同浏览器之间的样式不同点进行适配。
以下是一个简单的 normalize.css：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- -
normalize.css 中针对 HTML 元素的样式重置做的很少，更多的是通过针对具体元素进行微调以消灭浏览器差异。通过加入 normalize.css，我们可以使网站在各个浏览器中更为一致，减少不必要的兼容工作。
如果我们只使用 CSS Reset，可能会将一些标签样式设置成过于严谨的样式，导致网站在某些浏览器上表现异常。而如果只使用 normalize.css，可能会遗留一些浏览器的差异。针对这种情况，我们可以叠加使用 CSS Reset 和 normalize.css，以达到更好的重置效果。
以下是一种叠加使用 CSS Reset 和 normalize.css 的方法：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - -- ----- -------------------------------------------------------------------------- -- - - ------- -- -------- -- ----------- ----------- - ---- - ------------ ------ ----------- -
上述代码将 normalize.css 放在 CSS Reset 之前，并在注释中分别说明了对文档和对 HTML 元素的样式重置，以便更好地组织样式，保证样式的可读性。在实际使用中，还需要根据页面需求进行相应的元素样式微调。
总结
CSS Reset 和 normalize.css 都是常用的浏览器默认样式重置方法，两者的差异在于，CSS Reset 会将所有 HTML 元素的样式重置为一致，而 normalize.css 则只是针对不同浏览器之间的样式不同点进行适配。使用叠加 CSS Reset 和 normalize.css 可以更好地达到重置效果，同时需要进行相应的样式微调。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbcb9bf6b2d6eab31f04b3