前言
在前端开发中，我们经常需要用到 CSS Reset 来解决浏览器兼容性问题和规范化页面布局。本篇文章将对比几个经典的 CSS Reset 样式库，涵盖 Normalize.css、Reset.css 和 Modern CSS Reset三个常见的解决方案。
Normalize.css
Normalize.css 是一个详尽的、现代化的CSS reset方案，它将样式规范化，同时优化了不同浏览器之间的浏览效果，在不失去浏览器的默认关键功能的情况下创建了通用的CSS。
Normalize.css 中的重制目标是为了让浏览器在保留有用的默认值（如 input 补丁）和通用的行为（如所有元素都是 display: block; ）之外的默认样式相互一致。这意味着，Normalize.css 对不同浏览器没有不一致的差异，也没有一系列非必要的重置样式来使得浏览器的样式相互一致。
使用 Normalize.css 的好处是在不失去许多有用的默认值的情况下实现了样式规范化。但同时，Normalize.css 也是一种更加冗杂的解决方案，并且在初始化新项目时具有一定的学习曲线。
Reset.css
Reset.css 是最基本的 CSS Reset 样式库。通过将所有元素设置为相同的样式，Reset.css 把所有浏览器的默认样式都清空，使得页面布局更加规范和统一。
Reset.css 中的大多数 CSS 代码涉及到指定页面上的每种 HTML 元素（如 h1、p 等）应该采用的样式。实际上，大部分 CSS 规则的选择器都只针对单一的元素类型而非类名或 ID。
使用 Reset.css 的好处是最大限度地减少对浏览器默认样式的依赖，通常可以减少浏览器间的不一致性，但同时，也会导致一些务必需要浏览器默认值的情况（如 input 补丁、溢出按钮等）出现问题，并且在配置时需要慎重考虑如何针对特定元素重新定义默认样式。
Modern CSS Reset
Modern CSS Reset 是一种前沿的 CSS Reset 解决方案，这种方案更注重与主流现有浏览器的兼容性，同时提供了现代化的处理方式。
Modern CSS Reset 的流行原因在于它更加关注浏览器的默认值，并重新定义了一些默认值和存储空间。其使命是在不扭曲浏览器值或强制使用不必要的规则的情况下，减轻不同浏览器之间的布局差异，从而获得一个更标准化的样式库。
使用 Modern CSS Reset 的好处是提供现代风格的、针对目前市场主流浏览器的样式，以便更好的获得更加一致的结果。
示例代码
以下是针对常见的 HTML 元素在三种 CSS Reset 解决方案中的设置样式示例。
Normalize.css：
- - ------- -- - --- --- --- --- --- -- - ---------- -------- ------------ -------- -
Reset.css：
-- ----- ------- -- --- ---------- -- - - --------- - -- ----- --- ---- ----- --- ----- ---------- --- --- -------- -- ----------------- - ---------- ----- ------------ ------- -
Modern CSS Reset：
-- ----- ------- -- --- ---------- -- - - --------- - -- ----- --- ---- ----- --- ----- ---------- --- --- -------- ------ --- ----- -- --------- -- ---- ---- --- --------- -- -------- -- -- - ---------- -------- ------------ ---- - -------------- - ---------- ------- ------------ ---- -
结论
这三种 CSS Reset 解决方案在不同方面都有其优缺点，根据自己的项目需要选择或根据实际场景选择合适的解决方案参照使用即可。
总之，CSS Reset 始终是一种令人头痛的问题，选择哪个方案取决于个人偏好以及项目特点。掌握不同方案的优缺点和适用环境，并利用示例代码进行实践是学习的关键。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fb5b7c44713626015bcb2d