CSS Reset 是指在开发网站时，将 HTML 标签的默认样式清除，避免不同浏览器之间的样式差异。在前端开发中，常常使用 CSS Reset 来保证样式的一致性和统一性。本文将比较和分析 10 个常用的 CSS Reset 方案，为读者提供深度学习和指导意义。
1. Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是最为著名的 CSS Reset 方案之一，可以将所有元素的默认样式重置，避免不同浏览器之间的样式差异。其特点是不会对元素的默认样式进行完全清除，而是将样式还原为最基本和最简单的状态。例如，将所有元素的 margin 和 padding 设为 0。
示例代码：
-- -------------------- ---- ------- -- ---- ------- ----- --- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -展开代码
2. Normalize.css
Normalize.css 是一个广泛应用的 CSS Reset 方案，其主要过程是将所有元素的默认样式都清除，然后提供自己的默认样式。相比于 Eric Meyer's Reset CSS，Normalize.css 更为完整和细致，能够保证页面的一致性。其特点是对常见的 HTML 标签进行了特别处理，例如改进了表单元素的默认样式，修复了 IE 中的许多 bug。
示例代码：
-- -------------------- ---- ------- --- - ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- ------------------------- ----- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ----- -- ------- -------- --- ------- -- -- --- -- --- -- --- -- -- - ------- -- - --- - ------ --- ------ -- ------ ----- -- -- ---- -- -- --- -- -- - ------- -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ------- -------- --------- -- -- ---- -- -------- - --------- ----- - --- - -- ------- --- --- ---- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- -------- - -------- ----- -展开代码
3. HTML5 Reset Stylesheet
HTML5 Reset Stylesheet 是一份 HTML5 标准的 Reset 方案，用于重置和优化所有主流浏览器的默认样式。其特点是适用于 HTML5 标签，能够直接重置 HTML5 的元素。
示例代码：
-- -------------------- ---- ------- --- ----- ----- ---------- - ------------ - --- ------- -- ---------------------------------------- ----------------------------------- ------------------------------------- -------------------------------- ----------------------------------- ------------- ------------------ --------------------------- ----------------------------------------- ---------------------------------------- ----------------------------------------------------- --------------------- - --------- ---------- --------- ---------- --------------- ------------------------ ----------------------- --------------------- - -- ----- -------- ------- ---------- --------- ----- ---- ---- --- --------- ------- ------- ------ -- ---------------- --------- -- ---------------------------------------------------------------------------- - -------------- - --- -- - ---------------- - ----------- - - ------------ - ------------------ -------------------------- ------- - ------------------------ - - --- - ------------ - ------- - -------- ----- ----------------- -展开代码
4. Yahoo! Reset CSS
Yahoo! Reset CSS 是一个轻量级的 CSS Reset 方案，主要对页面进行重置和整理。相对于其他 Reset 方案，Yahoo! Reset CSS 更适合在大型项目中使用。其特点是清理了页面中的所有 Padding 和 Margin，并将元素的显示样式还原为默认样式。
示例代码：
-- -------------------- ---- ------- -- ------ ----- --- -- ---- - ------ ----- ----------- ----- - ---- - ------- -- -------- -- ----- ---------- ------ ---------- ----------- - -- --------- ------- ----------- -------- -- --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- - -- ----- ---- --- --------- ----------- -- - - ---------------- ----- ------ ----- - -- --- ------- ------ -- --------- ----- -- ------- - ------- -------- - -- - -------- ------ ------- ---- ------- -- ----------- --- ----- ----- ------- --- -- -------- -- -展开代码
5. Classic Reset
Classic Reset 是一份基础的 CSS Reset 方案，可以将所有 HTML 标签的默认样式重置为最基本和最简单的状态。其特点是清空了所有的 Padding 和 Margin，还原了元素的显示样式为默认状态。适合用于小型和中型项目。
示例代码：
-- -------------------- ---- ------- -- ------- ----- -- - - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ---- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -展开代码
6. Modern CSS Reset
Modern CSS Reset 是一份美观的 CSS Reset 方案，对基本样式进行了更改和优化。其特点是将元素设置为默认样式，并将一些样式进行更改，使页面更为美观。适合用于大型项目。
示例代码：
-- -------------------- ---- ------- -- ------ --- ----- -- ---- - ----------- ----------- ------------------------- ----- - -- --------- ------- - ----------- -------- - ---- - ------- -- ----------- ----- ------------ ---- ---------- ----- ------------ -------------- ------------------- ------ ---- --------- --------- --------- ------------ ----- ------ ------ ------ ---------- ------ ----------- - --- -- - ------- -- -------- -- ----------- ----- - - - ------ -------- ---------------- ----- - --- - ---------- ----- ------- ----- -------- ------ - --- --- --- --- --- --- - - ------- -- -展开代码
7. Universal CSS Reset
Universal CSS Reset 是一份易于使用的 CSS Reset 方案，可以适用于所有项目。其特点是将所有元素的默认样式清空，并在必要的情况下保持样式不变。
示例代码：
-- -------------------- ---- ------- -- --------- --- ----- -- -- --- --- --- ------- ------ -- - - ------- -- -------- -- ------- -- ------------ -- ---------- ----- ----- -------- --------------- --------- ----------- ----------- ---------------- ----------- ------------------- ----------- - -- ------- ------- ---------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - -- ------ ------- ---- ------ -- --- -- - ----------- ----- - -- ------ ------ -- ----------- - - ------------ - -- ----- ------- ------ -- ------------------ ----------------- --------- ------- - -------- --- -------- ----- - -- ----- ------- ------ -- ----- - ---------------- --------- --------------- -- - -- ----- ------ ---------- -- - - --------------------- -展开代码
8. Sanitize.css
Sanitize.css 是一份通用的 CSS Reset 方案，可以清除 HTML 标签的默认样式，并避免风格污染。其特点是根据 Web 标准进行了优化和锐化。
示例代码：
-- -------------------- ---- ------- --- - ------------ ------- - --- ------- - -------------------------------- -- -- -------- - -------------------------------------------------------------------------- -- --- - --- - ------ --- ----- -------------- -- ---- - ----------- ----------- - -- --------- ------- - ----------- -------- - --- - --- - ---- -------- --- ---- -------------- -- ----- - -------------- -- --------- -- - -- -------- - -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- -------- -------------- -- ---- - ------- -- - -- ---------- --------- - -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- - -------------------------------------------------------------------------- -- --- - ------ ---------- ------- ------- --- -------- -- -------- - ------- - ---- -------- ------ ------- ------- ------- --- ----- -------- - --- - -- ------- --- ---- -------- -- ---- --- --- - -- ------- --- ----- ----------- ---- ---------- -------- -- --- - -- ------ --- ------- -- ---------- --- --- ------ --- ---- ---- ---- --- ---------- -------- -- --- --------- -- ------ - -------- ------ ---------- ----- -------- -- ------ -------- ------------ ------- - --- - ------ --- ------- -------- --------- -- -- ---- -- -------- - --------- ----- - --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- ------------------ -------------- - ----------- ----------- -------- -- - --- - ------- --- ------ ----- -- --------- --- --------- ------- -- ------- -- ------------------------------------------- ------------------------------------------ - ------- ----- - --- - -- ------- --- --- ---------- -- ------ --- ------- - -- ------- --- ------- ----- -- ------- -- --------------- - ------------------- ---------- --------------- ----- - --- - ------ --- ----- ------- -- ------ --- ------ -- ------ -- ------------------------------------------ - ------------------- ----- - --- - -- ------- --- --------- -- ----- --------- ----- -- --- --- ------- - -- ------ ---- ---------- -- --------- -- ------- -- ---------------------------- - ------------------- ------- ----- -------- - -- ----------- - -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ------ --- ------- -- ------- - -------- ---------- - -- ------------------ ------------ ----- --展开代码
9. Base
Base 是一个轻量级的 CSS Reset 方案，适用于小型和中型项目。其特点是将所有元素的默认样式清除，并还原为最基本和最简单的状态。
示例代码：
-- -------------------- ---- ------- -- ---- -- - - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - --- -- - ----------- ----- - ----------- - - ------------ - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- - - - -------------- --------------------- -展开代码
10. Basic Reset
Basic Reset 是一份基础的 CSS Reset 方案，主要将所有元素的默认样式清除，还原为最基本和最简单的状态。适用于小型和中型项目。
示例代码：
-- -------------------- ---- ------- -- ----- ----- -- - - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -------- ------ -------- ----------- ------- ------- ------- ------- ----- ----- ---- ------- - -------- ------ - --- -- - ----------- ----- - ----------- - - ------------ - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- - - - -------------- --------------------- -展开代码
比较与分析
以上是 10 个常用的 CSS Reset 方案的示例代码。这些方案各有特点，具体应用要根据项目的特点进行选择。简单来说，若是大型项目，可使用较为完整和细致的 Reset 方案，例如 Normalize.css 和 Sanitize.css；若是小型和中型项目，可使用较为精简的 Reset 方案，例如 Eric Meyer's Reset CSS、Base 和 Basic Reset。
综上所述，CSS Reset 是保证网站样式一致性的重要手段。学会选择和使用不同的 CSS Reset 方案，将会对前端开发产生很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c13c0f314edc26849012de
