前言
在前端开发中，我们经常需要使用 CSS 来美化页面，但是在不同的浏览器中，页面的样式可能会有所差异，这时候我们就需要使用 CSS Reset 来规范不同浏览器的默认样式。本文将介绍一些实用的 CSS Reset 技巧，并演示如何利用这些技巧来打造属于自己风格的页面。
什么是 CSS Reset？
CSS Reset 是一种将所有浏览器的默认样式重置为统一的样式的技术。通过使用 CSS Reset，我们可以消除不同浏览器之间的差异，使我们的页面在各种浏览器中呈现相同的样式。
在实际开发中，我们可以使用现成的 CSS Reset 库，也可以自己编写 CSS Reset 样式。
常见的 CSS Reset 样式
Eric Meyer's Reset CSS
Eric Meyer's Reset CSS 是最早的 CSS Reset 样式之一，它通过将所有元素的外边距和内边距设置为 0，来消除不同浏览器之间的差异。以下是 Eric Meyer's Reset CSS 样式：
-- -------------------- ---- -------
----- ----- ---- ----- ------- ------- -------
--- --- --- --- --- --- -- ----------- ----
-- ----- -------- -------- ---- ----- -----
---- ---- --- ---- ---- ---- -- -- -----
------ ------- ------- ---- ---- --- ----
-- -- -- -------
--- --- --- --- --- ---
--------- ----- ------ -------
------ -------- ------ ------ ------ --- --- -- -
------- --
-------- --
------- --
-------- --
---------- -----
--------------- ---------
----------- ------------
-Normalize.css
Normalize.css 是一个流行的 CSS Reset 库，它通过覆盖浏览器默认样式，来消除不同浏览器之间的差异，并提供了一些常用的样式。以下是 Normalize.css 样式：
-- -------------------- ---- -------
-- ------------- ------ - --- ------- - -------------------------------- --
-- --------
-------------------------------------------------------------------------- --
---
- -- ------- --- ---- ------ -- --- ---------
- -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
--
---- -
------------ ----- -- - --
------------------------- ----- -- - --
-
-- --------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- --- ---------
--
---- -
------- --
-
---
- ------- ----------- -- ------- ----- -- --- --------- -----------------------------------------------------------
--
---- -
------------
----------
-------------- -- ------- -------- ---- --- --- --- ----------- --
------ ---- ------- ---------- ------ ----------- ------ ----- ------- ------ -- ------- -- - --
-
-- -------- -------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- ------ ----- -- ------- -------- --- -------
--
-- ---
-- ---
-- ---
-- ---
-- -- -
------- --
-
---
- ------ --- ------ -- ------ ----- -- ---- --- ---
--
-- ---
-- ---
-- ---
-- -- -
------- --
-
---
- -- --- --- ------- --- ------ -- --------
- -- ---- --- -------- -- ---- --- ---
--
-- -
----------- ------------ -- - --
------- -- -- - --
--------- -------- -- - --
-
---
- -- ------- --- ----------- --- ------- -- ---- ---- -- --- ---------
- -- ------- --- --- ---- ---- ------ -- --- ---------
--
--- -
------------ ---------- ---------- -- - --
---------- ---- -- - --
-
-- ---------- ---------
-------------------------------------------------------------------------- --
---
- ------ --- ---- ---------- -- ------ ----- -- -- ---
--
- -
----------------- ------------
-
---
- -- ------ --- ------ ------ -- ------ ---
- -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- -------
--
----------- -
-------------- ----- -- - --
---------------- ---------- -- - --
---------------- --------- ------- -- - --
-
---
- --- --- ------- ---- ------ -- ------- ----- --- -------
--
--
------ -
------------ -------
-
---
- -- ------- --- ----------- --- ------- -- ---- ---- -- --- ---------
- -- ------- --- --- ---- ---- ------ -- --- ---------
--
-----
----
---- -
------------ ---------- ---------- -- - --
---------- ---- -- - --
-
---
- --- --- ------- ---- ---- -- --- ---------
--
----- -
---------- ----
-
---
- ------- ----- --- ----- -------- ---- --------- --- ---- ------ --
- --- ---------
--
----
--- -
---------- ----
------------ --
--------- ---------
--------------- ---------
-
--- -
------- --------
-
--- -
---- -------
-
-- -------- -------
-------------------------------------------------------------------------- --
---
- ------ --- ------ -- ------ ------ ----- -- -- ---
--
--- -
------------- -----
-
-- -----
-------------------------------------------------------------------------- --
---
- -- ------ --- ---- ------ -- --- ---------
- -- ------ --- ------ -- ------- --- -------
--
-------
------
---------
-------
-------- -
------------ -------- -- - --
---------- ----- -- - --
------------ ----- -- - --
------- -- -- - --
-
---
- ---- --- -------- -- ---
- -- ---- --- -------- -- -----
--
-------
----- - -- - --
--------- --------
-
---
- ------ --- ----------- -- ---- --------- -- ----- -------- --- ---
- -- ------ --- ----------- -- ---- --------- -- --------
--
-------
------ - -- - --
--------------- -----
-
---
- -- ------- - ------ --- ----- --- -------- ------ ------- --- -------
- -------- -- ------- --
- -- ------- --- --------- -- ----- --------- ----- -- --- --- -------
--
-------
---- ---------------- -- - --
---------------
--------------- -
------------------- ------- -- - --
-
---
- ------ --- ----- ------ --- ------- -- --------
--
------------------
-------------- -
----------- -----------
-------- --
-
---
- -- ------- --- --- ---------- -- ------ --- -------
- -- ------- --- ------- ----- -- -------
--
--------------- -
------------------- ---------- -- - --
--------------- ----- -- - --
-
---
- ------ --- ----- ------- -- ------ --- ------ -- ------
--
-------------------------------------------
------------------------------------------ -
-------- -----
-
---
- -- ------- --- ---- -------- -- ---- --- ---
- -- ------- --- ----- ----------- ---- ---------- -------- -- ---
- -- ------ --- ------- -- ---------- --- --- ------ --- ---- ---- ---- ---
- ---------- -------- -- --- ---------
--
-------- -
-------- ------ ------ --------
-
------ -
----------- ----------- -- - --
------ -------- -- - --
-------- ------ -- - --
---------- ----- -- - --
-------- -- -- - --
------------ ------- -- - --
-
---
- --- --- ------- -------- --------- -- ------- -------- --- ------
--
-------- -
--------------- ---------
-
---
- ------ --- ------- -------- --------- -- -- ----
--
-------- -
--------- -----
-
---
- -- --- --- ------- --- ------ -- -- ---
- -- ------ --- ------- -- -- ---
--
------------------
-------------- -
----------- ----------- -- - --
-------- -- -- - --
-
---
- ------- --- ------ ----- -- --------- --- --------- ------- -- -------
--
-------------------------------------------
------------------------------------------ -
------- -----
-
---
- -- ------- --- --- ---------- -- ------ --- -------
- -- ------- --- ------- ----- -- -------
--
--------------- -
------------------- ---------- -- - --
--------------- ----- -- - --
-
---
- -- ------ --- ------ -- --- ---------
- -- ------- --- ------- -- --------
--
----------------------------- -- - --
------------------------- - -- - --
------------------- ------- -- - --
----- -------- -- - --
-
-- -----------
-------------------------------------------------------------------------- --
--
- --- --- ------- ------- -- ----- -- ---- --- --------
--
------- -
-------- ------
-
--
- --- --- ------- ------- -- --- ---------
--
------- -
-------- ----------
-
-- ----
-------------------------------------------------------------------------- --
---
- --- --- ------- ------- -- -- ----
--
-------- -
-------- -----
-
---
- --- --- ------- ------- -- -- ---
--
-------- -
-------- -----
-如何利用 CSS Reset 打造属于自己风格的页面
在使用 CSS Reset 的同时，我们还需要根据自己的需求，添加一些自定义的样式，来打造属于自己风格的页面。
以下是一个简单的示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------- --------------- ------ ---------------- --------------- --------------------- -------- ------ - -------------------- -------- --------------- ------ ----------- --- -- ---- - ------------- ----- --------- ----- ---------- ---- -- --- -- --- - ------------- ----- --------------- ---- --------- ----- ----------------- ----- --- -- ------------ - ------------- ------- ---------- - ----- ----------- - ----- --- -- --------- - -------------------- ----- ----------- ----- -------------- - - ---- ---------------- --- -- ------ - -------------- ----- ---------- -- ----------- -- -------------------- ----- --------- ----- --- -- ------ -- - ----------- ------------- ---------------- ----- --- -- ------ - - ----------- ------ ----------- ----- --------- ----- ------------------- ----- --- -- ------ ------- - -------------------- ----- --- -- ------- - -------------------- ----- ----------- ----- -------------- - - ---- ---------------- -------------- ----- ----------------- ----- --- -- --------- - -------------------- ----- --------- ----- ----------- ----- -------------- - - ---- ---------------- --- -- --------- - - ---------- -- --- --------- ------- ------ ----- ------------------ --------- --------------- --------- ------------ ------- ------------ -------- ----------- ---------------------- ----------- ----------------------- ----------- -------------------------- ----------- ------------------------- --------- --------- ----------- ------- ------------- ----------- ----- ----- --- ----- ----------- ---------- ----- --- -------- ------ -- ------ ---------- --- ------ -------- ------ --- --------- --- ----- -- ---- ----- ---- ------ -- ---- --------- -------- --- ------------ ----- -------- ----------- ----- ---- -------- ----- ----- --------- ----- ------------ --- -- ---- --------- --- -------- ---- ------- -- --- --------- ------ --------- --- -------- ------ ----- --------- ------- ----- ---- ------- ----- --- ------ ----- ---- - ----- --- ------- ---- --- ----- ------- ---- -------- ------ ---------- ------- --- ----- -------- -------- ------ ---- ----------- ------ --- --- --- ------- ------- ----- ---- --------- ------ --- --- ----- ---------- ----- ----- ---- --------- ------ --- --- --- -- ------ -------- --------- ----- --- --------- --- --------- --- -------- ------ ---- ------------ ----- ------- ------ - ------ ------- ----- --------- --- ------- ------ --- ----- ----------- --- -------- --- ------- ------ -------- ---- ---- ------- ---------- -- ---- -------- ------ -- ------ ---- --- --- ----- ----- ---- ----- ---- ---- ------- ---------- -------- -- ----- -- ---- --------- ---------- --------- ------ ------ --- ---- ---------- --- --------- ----- --------- --- -- ---- --- ---- -------- ------- ---- ----------- --------- ----- --- -- -------- ------- ----- -- --------- ------ ----- --------- ----- -- ------ --- ---- ----- ------- ---------- ---------- -- ---- --- ---- ------- ------- -- ---- ----- ---- --- ----- -- ---- ------- ------- -- --- --- ----- --------- ----- -- ------ ------ -- -------- ------ ---------- ---- ----- ------ -- -------- ---- ------ -- -------- ------- ------- ------ --- --- -------- ------ ---- --------- --------- --------------- ------------ ---- -- ----------- ----------- ------- ------- -------
在这个示例代码中，我们首先引入了 Normalize.css，然后添加了自定义的样式，包括背景颜色、字体、间距、阴影等。通过使用 CSS Reset 和自定义样式，我们可以轻松地打造出属于自己风格的页面。
结语
CSS Reset 是前端开发中非常重要的一部分，它可以帮助我们消除不同浏览器之间的差异，使我们的页面呈现出一致的样式。同时，我们还可以根据自己的需求，添加一些自定义样式，来打造出属于自己风格的页面。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6788fc10881faa801f47b38b
