在进行 web 前端开发时，我们通常需要对网页进行样式重置，使得我们的样式能够更加统一和规范。这时候就需要用到 CSS Reset 技术。CSS Reset 技术是一种用来清除浏览器默认样式的方法，它可以帮助我们在不同浏览器中实现一致的样式效果。
本文将对国内外典型的 CSS Reset 进行对比，帮助读者更好地了解 CSS Reset 技术，并提供一些指导性的意义。
国外典型 CSS Reset
Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是最早的 CSS Reset 技术之一，由 CSS 专家 Eric Meyer 开发。它可以清除浏览器默认样式，并使得元素的表现更加统一。它的代码如下：
-- -------------------- ---- ------- -- ---- ------- ----- --- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -展开代码
Eric Meyer's Reset CSS 适用于大多数情况下的样式重置，但是它并没有考虑到 HTML5 新标签的出现，因此在使用时需要特别注意。
Normalize.css
相比于 Eric Meyer's Reset CSS，Normalize.css 更加注重浏览器兼容性。它可以使得不同浏览器中的样式更加一致。Normalize.css 的代码如下：
-- -------------------- ---- ------- --- ------------- ------ - --- ------- - -------------------------------- -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - --- - ------ --- ------ ------- ------------ -- --- -- ---- - -------- ------ - --- - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- --- - --------- -------- -- ------- -------- --- ------- -- -- - ---------- ---- ------- ------ -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - -------------- ----- -- - -- ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- ----- ---- ---- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - --- - --- --- ------- ---- ---- -- --- --------- -- ----- - ---------- ---- - --- - ------- ----- --- ----- -------- ---- --------- --- ---- ------ -- - --- --------- -- ---- --- - ---------- ---- ------------ -- --------- --------- --------------- --------- - --- - ------- -------- - --- - ---- ------- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- --------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- --------------- ----- - --- - ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - --- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ - ------------- ----- -------- -- - --- - ------- --- ----- ------ ----- -- --- -------- ----- -- --------------- - -------- --- ------ ----------- - --- - ------ --- ---------- -------- ----- -------- -- ------ --- ------ ------- - ------- -- ------- -- ------------------ -------------- - ----------- ----------- -------- -- - --- - ------- --- ------ ----- -- --------- --- --------- ------- -- ------- -- ------------------------------------------- ------------------------------------------ - ------- ----- - --- - -- ------- --- --- ---------- -- ------ --- ------- - -- ------- --- ------- ----- -- ------- -- --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - --- - ------ --- ----- ------- -- ------ --- ------ -- ------ -- ------------------------------------------ - ------------------- ----- - --- - -- ------- --- --------- -- ----- --------- ----- -- --- --- ------- - -- ------ ---- ---------- -- --------- -- ------- -- ---------------------------- - ------------------- ------- -- - -- ----- -------- -- - -- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ---- --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------- -- --- --------- -- ------- - -------- ---------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ---- -- -------- - -------- ----- - --- - --- --- ------- ------- -- -- --- -- -------- - -------- ----- -展开代码
Normalize.css 是一种相对较新的 CSS Reset 技术，它可以使得不同浏览器中的样式更加一致，是目前比较流行的一种 CSS Reset 方案。
国内典型 CSS Reset
Reset.css
Reset.css 是国内知名前端开发者张鑫旭开发的一种 CSS Reset 技术。它可以清除浏览器默认样式，并使得元素的表现更加统一。它的代码如下：
-- -------------------- ---- ------- -- ----- -- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -展开代码
Reset.css 与 Eric Meyer's Reset CSS 的代码类似，但是它更加注重中文排版的问题，因此它的表现更加适合中文网站。
Yahoo Reset CSS
Yahoo Reset CSS 是雅虎前端开发者开发的一种 CSS Reset 技术，它可以清除浏览器默认样式，并使得元素的表现更加统一。它的代码如下：
-- -------------------- ---- ------- -- ----- ----- --- -- ---- - ------ ----- ----------- ----- - ------------------------------------------------- ----------------------------------------------- - ------- -- -------- -- - ----- - ---------------- --------- --------------- -- - ------------ - ------- -- - ------------------------------------------------------- - ----------- -------- ------------ -------- - ------- - ---------------- ----- - -- - ----------- ----- - ---------- - ----------- ----- - ----------------- - ---------- ----- ------------ ------- - ---------------- - -------- --- - ------------ - ------- -- ------------- ------- - --- - --------------- --------- - --- - --------------- --------- - ------ - ------ ----- -展开代码
Yahoo Reset CSS 的代码与 Eric Meyer's Reset CSS 的代码类似，但是它更加注重表单元素的样式，因此在表单样式重置时更加适合。
对比分析
三种 CSS Reset 技术的代码非常相似，它们都可以清除浏览器默认样式，并使得元素的表现更加统一。但是它们在一些细节上有所不同，因此需要根据自己的需求选择适合自己的 CSS Reset 技术。
Eric Meyer's Reset CSS 是最早的 CSS Reset 技术之一，代码简洁，适用于大多数情况下的样式重置，但是它并没有考虑到 HTML5 新标签的出现，因此在使用时需要特别注意。
Normalize.css 更加注重浏览器兼容性，它可以使得不同浏览器中的样式更加一致，是目前比较流行的一种 CSS Reset 方案。
Reset.css 与 Eric Meyer's Reset CSS 的代码类似，但是它更加注重中文排版的问题，因此它的表现更加适合中文网站。
Yahoo Reset CSS 的代码与 Eric Meyer's Reset CSS 的代码类似，但是它更加注重表单元素的样式，因此在表单样式重置时更加适合。
指导意义
CSS Reset 技术是前端开发中非常重要的一部分，它可以帮助我们在不同浏览器中实现一致的样式效果。在使用 CSS Reset 技术时，我们需要根据自己的需求选择适合自己的 CSS Reset 技术。同时，在使用 CSS Reset 技术时，我们需要注意一些细节问题，例如 HTML5 新标签的出现、中文排版的问题以及表单元素的样式等。
本文介绍了国内外典型的 CSS Reset 技术，并对它们进行了对比分析，希望能够帮助读者更好地了解 CSS Reset 技术，并提供一些指导性的意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d53299a941bf7134998cfc
