在进行前端开发的过程中，“CSS Reset” 是一个很重要的概念。它的作用是重置浏览器默认的样式，使得不同浏览器的渲染结果更一致。本文将介绍常用的 CSS Resets 样式表以及它们的优缺点。
常用的 CSS Reset 样式表
Eric Meyer's Reset CSS
Eric Meyer 的 Reset CSS 是最早的 CSS Reset 之一，它的样式较为全面，包括对标签的重置，对行高、字体大小、文本间距等的定义。以下是 Eric Meyer 的 Reset CSS 示例代码。
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
normalize.css
normalize.css 是目前最受欢迎的 CSS Reset 库，它相较于 Eric Meyer 的 Reset CSS 更加轻量级，仅仅实现了最少限度的重置规则，并且保留了一些有用的默认样式。以下是 normalize.css 示例代码。
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - -------------- ----- -- - -- ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - --- - ------- --- --------- ----------- -- -------- -- --- ---- ---- -- ------ -- -- -- ------ - ------------ -------- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- ----- ---- ---- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- -------- - --- - ---- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- --------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- --------------- ----- - --- - ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - --- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ - ------------- ----- -------- -- - --- - ------- --- ----- ------ ----- -- --- -------- ----- -- --------------- - -------- --- ------ ----------- - --- - ------- --- ---- -------- -- ---- --- --- -- ----------------------- - ------ -------- -------- ---- - ------------------------ -------------------------- - ------ -------- -------- ---- - --- - ------- --- ------ ----- -- --------- --- --------- ------- -- ------- -- ---------------------------- --------------------------- - ------- ----- - --- - -- ------- --- --- ---------- -- ------ --- ------- - -- ------- --- ------- ----- -- ------- -- --------------------------- - ------------------- ----- -- - -- - ---------------------------- - ------------------- ------- -- - -- ----- -------- - --- - ------ --- ----- ------- --- ------ ------- -- ------ --- ------ -- ------ -- ------------------------------- ------------------------------- - ------------------- ----- - --- - ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- --------------------------- - ------ -------- -------- ---- - -- --------- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- --- -- ------ - -------- ------------- - --- - --- --- ------- ------- -- --- -- -------- - -------- ----- - --- - --- --- ------- ------- -- ----- -- ---- --- -------- -- -------- - -------- ----- -
优缺点分析
Eric Meyer's Reset CSS
优点：
- 样式清晰和全面
- 强制浏览器一致化渲染
缺点：
- 过度强制统一样式，不太灵活，可能导致一些非常规的样式失效
- 代码比较冗长
normalize.css
优点：
- 轻量级，代码简洁
- 保留了有用的默认样式，更加灵活
- 适应了现代浏览器的发展，保证了向后兼容
缺点：
- 可能不会完全重置所有样式
总结
在选择 CSS Reset 库时，需要根据实际要求，对比各种 Reset 样式表，挑选适合的样式库来实现前端页面的风格统一。Eric Meyer's Reset CSS 和 normalize.css 都有自身的优缺点，可以根据需求权衡选用。同时，还要考虑到网站的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a0e92248841e9894d2e0f7