CSS reset 是前端开发中十分常见的一种技术手段，它的作用是消除浏览器默认样式，以便我们能够更加自由地控制页面的样式。本文将深入剖析 CSS reset 的原理，并介绍如何正确使用。
CSS reset 的原理
浏览器默认样式存在的目的是为了保证页面的可访问性和一致性，但是这些默认样式在实际开发中却经常会带来一些问题，比如不同浏览器之间的表现不一致、样式的兼容性问题等等。CSS reset 的原理就是将所有元素的默认样式都重置为相同的值，这样我们就可以自由地控制其样式，避免了浏览器默认样式带来的问题。
常见的 CSS reset 方案
Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是最早的 CSS reset 方案之一，其核心代码如下：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -展开代码
这个方案重置了所有元素的 margin、padding、border、font-size 等属性，同时对一些元素的默认样式进行了调整，比如将一些块级元素设置为 display: block。
Normalize.css
Normalize.css 是一种比较新的 CSS reset 方案，它在 Eric Meyer's Reset CSS 的基础上进行了改进，更加注重一致性和兼容性。其核心代码如下：
-- -------------------- ---- ------- -- - ------------- ------ - ---------------------------------------- - ---- -- --- --- ----- -- ---- ----- -- - -------- ----- - -------- ----- --- --- ------- - -- -- -------- -------------------------------------------------------------------------- -- --- - -- ------- --- ---- ------ -- --- --------- - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ---- -- ---- - ------------ ----- -- - -- ------------------------- ----- -- - -- ---------------------------- ------- -- -- --- - -- -------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- --- --------- -- ---- - ------- -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - -- --- --- ------- --- ------ -- -------- - -- ---- --- -------- -- ---- --- --- -- -- - ----------- ------------ -- - -- ------- -- -- - -- --------- -------- -- - -- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- --- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- ---------- --------- -------------------------------------------------------------------------- -- --- - ------ --- ---- ---------- -- ------ ----- -- -- --- -- - - ----------------- ------------ - --- - -- ------ --- ------ ------ -- ------ --- - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- ------- -- ----------- - -------------- ----- -- - -- ---------------- ---------- -- - -- ---------------- --------- ------- -- - -- - --- - --- --- ------- ---- ------ -- ------- ----- --- ------- -- -- ------ - ------------ ------- - --- - -- ------- --- ----------- --- ------- -- ---- ---- -- --- --------- - -- ------- --- --- ---- ---- ------ -- --- --------- -- ----- ---- ---- - ------------ ---------- ---------- -- - -- ---------- ---- -- - -- - -- -------- ------- -------------------------------------------------------------------------- -- --- - ------ --- ------ -- ------ ------ ----- -- -- --- -- --- - ------------- ----- - -- ----- -------------------------------------------------------------------------- -- --- - -- ------ --- ---- ------ -- --- --------- - -- ------ --- ------ -- ------- --- ------- -- ------- ------ --------- ------- -------- - ------------ -------- -- - -- ---------- ----- -- - -- ------------ ----- -- - -- ------- -- -- - -- - --- - ---- --- -------- -- --- - -- ---- --- -------- -- ----- -- ------- ----- - -- - -- --------- -------- - --- - ------ --- ----------- -- ---- --------- -- ----- -------- --- --- - -- ------ --- ----------- -- ---- --------- -- -------- -- ------- ------ - -- - -- --------------- ----- - --- - ------- --- --------- -- ----- --------- ----- -- --- --- ------- -- ------- ---------------- --------------- --------------- - ------------------- ------- - --- - ------ --- ----- ------ --- ------- -- -------- -- ------------------ -------------- - ----------- ----------- -------- -- - --- - -- ------- --- --- ---------- -- ------ --- ------- - -- ------- --- ------- ----- -- ------- -- --------------- - ------------------- ---------- -- - -- --------------- ----- -- - -- - --- - ------ --- ----- ------- -- ------ --- ------ -- ------ -- ------------------------------------------- ------------------------------------------ - ------- ----- - --- - -- ------- --- ---- ---- ----------- -- --- --------- - -- ------- --- ------ --- ------- --- ------------ -- ------- -------- --- ------- -- --------------------------- - ------ -------- -------- ---- - ------------------ - ------ -------- -------- ---- - ---------------------- - ------ -------- -------- ---- - ----------------------- - ------ -------- -------- ---- - ------------- - ------ -------- -------- ---- - --- - ------ --- ------ -- ------ -------- -- -------- -- ------ - ------- -------- - --- - -- ------ --- ------ -- -- ------ - -- ------ --- ------- -- -- ------ -- -------------- --------------- ------------- ------------------ ---------------- -------------- --------------- ---------------- ------------- -------------- ------------- - ------------------- ----- -- - -- ----------- ----- -- - -- ------- ----- -- - -- -------- -- -- - -- - -------------------- --------------------- ------------------- ------------------------ ---------------------- -------------------- --------------------- ---------------------- ------------------- -------------------- ------------------- - -------- ----- - --- - ------ --- ----- ------- --- ------ ------- -- ------ --- ------ -- ------ -- ---------------------------------------------- ------------------------------------------ - ------------------- ----- - -- ----------- -------------------------------------------------------------------------- -- -- - --- --- ------- ------- -- ----- -- ------ --- -------- -- ------- - -------- ------ - -- - --- --- ------- ------- -- --- --------- -- ------- - -------- ---------- - -- ---- -------------------------------------------------------------------------- -- --- - --- --- ------- ------- -- -- ------ -- -------- - -------- ----- - --- - --- --- ------- ------- -- -- ----- --- -------- -- -------- - -------- ----- -展开代码
Normalize.css 保留了一些浏览器默认样式，同时还对一些元素的默认样式进行了调整，比如对 form 元素的样式进行了统一，使其在不同浏览器中表现一致。
如何正确使用 CSS reset
虽然 CSS reset 可以消除浏览器默认样式，但是在实际开发中并不是一定需要使用的。如果你的项目中只需要在最小程度上重置一些样式，可以考虑使用 normalize.css 这样的方案；如果你需要完全自定义页面的样式，可以考虑使用 CSS reset。
使用 CSS reset 的时候需要注意以下几点：
- 在引入 CSS reset 之前，应该先引入其他 CSS 文件，以便在 reset 后可以覆盖其中的样式；
- 一些浏览器的默认样式是有必要的，比如 input 和 button 的一些样式，需要根据实际情况进行调整；
- CSS reset 可能会导致一些元素的样式出现异常，需要进行调试和修复。
示例代码
下面是一个简单的示例代码，演示如何使用 normalize.css 进行 CSS reset：
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- ---------- ----- ------------ ----- ---------------- -------------------------------------------------------------------------------- ------- -- ---------- -- -------- ------- ------ ---- ----- ---- -- --- ------- -------展开代码
结语
CSS reset 是一种非常实用的前端技术，能够帮助我们更好地控制页面的样式。在选择使用 CSS reset 方案的时候，需要根据实际情况进行选择，并注意一些细节问题。希望本文能够对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/678a650f881faa801f8fb84e
