作为前端开发者，你一定遇到过浏览器样式兼容的问题。虽然每个浏览器都有自己的默认样式，但它们的差异可能会导致网页展示效果不同。为了解决这个问题，我们需要使用 CSS Reset。
CSS Reset 是什么？
CSS Reset 是一种将 HTML 元素的默认样式重置为一致的方法。它能够消除不同浏览器之间的差异，让我们从一开始就拥有完全自由地掌控元素样式的能力。
- 样式兼容性不同
不同浏览器之间的样式兼容性不同。比如一些浏览器会为 ul 添加注释样式。如果我们没有使用 CSS Reset，它们的默认样式会影响我们的页面展示效果。
- 自由掌控样式
使用 CSS Reset 可以让我们从一开始就拥有完全自由地掌控元素样式的能力，不必考虑不同浏览器对样式的默认设置。我们可以根据自己的需求来修改元素样式。
- 提高开发效率
如果我们从头开始编写样式，需要一遍又一遍地调整浏览器样式，消耗了我们很多时间和精力。而使用 CSS Reset 可以让我们快速地创建页面，提高开发效率。
常用的 CSS Reset
常见的 CSS Reset 已经被大多数开发者所使用，以下是其中一些常用的 CSS Reset：
- Eric Meyer’s Reset CSS
-- -------------------- ---- ------- -- ---- ------- ----- --- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- -------- -- ---------- ----- --------------- --------- ----------- ------------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - -- -------- -- ------ ----- ------- -- ------ - -------- -- - -- -------- -- --------- ------- -------- -- --- - ---------------- ----- - --- - ---------------- ------------- - -- ------ ----- ---- ----------------- -- --- ------ -- ----- - ---------------- --------- --------------- -- -
- Normalize.css
-- -------------------- ---- ------- -- ------------- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - ---- - ------- -- - ---- - -------- ------ - -- - ---------- ---- ------- ------ -- - -
总结
使用 CSS Reset 是提高页面兼容性、增加样式掌控自由度以及提高开发效率的好方法。我们可以使用已经存在的常见 CSS Reset 或者自己编写一份 Reset CSS，来消除浏览器样式之间的差异。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653ab07f7d4982a6eb4dfad2