透彻理解 CSS reset 并正确使用

阅读时长 14 分钟读完

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 的时候需要注意以下几点:

  1. 在引入 CSS reset 之前,应该先引入其他 CSS 文件,以便在 reset 后可以覆盖其中的样式;
  2. 一些浏览器的默认样式是有必要的,比如 input 和 button 的一些样式,需要根据实际情况进行调整;
  3. CSS reset 可能会导致一些元素的样式出现异常,需要进行调试和修复。

示例代码

下面是一个简单的示例代码,演示如何使用 normalize.css 进行 CSS reset:

-- -------------------- ---- -------
--------- -----
----- -------------
------
    ----- ----------------
    ---------- ----- ------------
    ----- ---------------- --------------------------------------------------------------------------------
    -------
        -- ---------- --
    --------
-------
------
    ---- ----- ---- -- ---
-------
-------
展开代码

结语

CSS reset 是一种非常实用的前端技术,能够帮助我们更好地控制页面的样式。在选择使用 CSS reset 方案的时候,需要根据实际情况进行选择,并注意一些细节问题。希望本文能够对大家有所帮助。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/678a650f881faa801f8fb84e

纠错
反馈

纠错反馈

程序员教程

精选优质教程,助你快速提升技术实力

程序员面试题库

海量优质面试题,助你轻松应对技术面试