常见的 CSS Reset 大全

CSS Reset 是一种用于规范化浏览器默认样式的技术，它对于前端开发来说是非常常见也很有用的。通过使用 CSS Reset，我们可以确保不同浏览器在渲染页面时保持一致的样式，从而提高页面的可维护性和可靠性。在本文中，我们将介绍几种常见的 CSS Reset 技术，包括它们的优缺点、使用方法以及示例代码。

1. Eric Meyer Reset

Eric Meyer Reset 最初由 CSS 专家 Eric Meyer 提出，并在 2000 年左右开始广泛使用。这个 Reset 方法通过消除浏览器默认样式中大量的不必要元素和属性，从而让页面更易于定制。其主要特点包括：

  • 将默认的 margin 和 padding 设置为 0
  • 设置所有元素的 font-size 为 1em，并且使用 sans-serif 字体
  • 消除链接的下划线并设置链接颜色为黑色

然而，Eric Meyer Reset 的缺点在于它可能会覆盖一些有用的默认样式，如表单和按钮。因此，它并不适用于所有项目。下面是 Eric Meyer Reset 的示例代码：

----- ----- ---- ----- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- -
  ------- --
  -------- --
  ------- --
  -------- --
  ---------- -----
  --------------- ---------
  ----------- ------------
-

---- -
  ------------ --
-

--- -- -
  ----------- -----
-

----------- - -
  ------- -----
-

------------------ ----------------- --------- ------- -
  -------- ---
  -------- -----
-

------ -
  -------- --
-

--- -
  ---------------- -----
-

--- -
  ---------------- -------------
-

----- -
  ---------------- ---------
  --------------- --
-

2. Normalize.css

Normalize.css 是一种比较新的 Reset 技术，由 Nicolas Gallagher 和 Jonathan Neal 发起并维护。与 Eric Meyer Reset 不同，Normalize.css 的目标是使得不同浏览器在样式上尽量一致，而不是完全重置所有样式。它主要做了以下事情：

  • 修复常见的桌面端和移动端浏览器的 bug
  • 重置元素的默认样式并保留有用的样式，如表单和按钮样式
  • 使得样式更加一致并且易于定制

Normalize.css 可以与 Sass 或 LESS 预处理器配合使用，并且可以通过下载或使用 CDN 引入。下面是 Normalize.css 的示例代码：

---
 - ------------- ------ - --- ------- - --------------------------------
 --

-- --------
   -------------------------------------------------------------------------- --

---
 - -- ------- --- ---- ------ -- --- ---------
 - -- ------- ----------- -- ---- ---- ----- ----------- ------- -- ----
 --

---- -
  ------------ ----- -- - --
  ------------------------- ----- -- - --
-

-- --------
   -------------------------------------------------------------------------- --

---
 - ------ --- ------ -- --- ---------
 --

---- -
  ------- --
-

---
 - ------ --- ------ ------- ------------ -- ---
 --

---- -
  -------- ------
-

---
 - ------- --- ---- ---- --- ------ -- ---- -------- ------ --------- ---
 - --------- -------- -- ------- -------- --- -------
 --

-- -
  ---------- ----
  ------- ------ --
-

-- -------- -------
   -------------------------------------------------------------------------- --

---
 - -- --- --- ------- --- ------ -- --------
 - -- ---- --- -------- -- ---- --- ---
 --

-- -
  ----------- ------------ -- - --
  ------- -- -- - --
  --------- -------- -- - --
-

---
 - -- ------- --- ----------- --- ------- -- ---- ---- -- --- ---------
 - -- ------- --- --- ---- ---- ------ -- --- ---------
 --

--- -
  ------------ ---------- ---------- -- - --
  ---------- ---- -- - --
-

-- ---------- ---------
   -------------------------------------------------------------------------- --

---
 - ------ --- ---- ---------- -- ------ ----- -- -- ---
 --

- -
  ----------------- ------------
-

---
 - -- ------ --- ------ ------ -- ------ ---
 - -- --- --- ------- ---- ---------- -- ------- ----- --- ------ --- -------
 --

----------- -
  -------------- ----- -- - --
  ---------------- ---------- -- - --
  ---------------- --------- ------- -- - --
-

---
 - --- --- ------- ---- ------ -- ------- ----- --- -------
 --

--
------ -
  ------------ -------
-

---
 - -- ------- --- ----------- --- ------- -- ---- ---- -- --- ---------
 - -- ------- --- --- ---- ---- ------ -- --- ---------
 --

-----
----
---- -
  ------------ ---------- ---------- -- - --
  ---------- ---- -- - --
-

---
 - --- --- ------- ---- ---- -- --- ---------
 --

----- -
  ---------- ----
-

---
 - ------- ----- --- ----- -------- ---- --------- --- ---- ------ --
 - --- ---------
 --

----
--- -
  ---------- ----
  ------------ --
  --------- ---------
  --------------- ---------
-

--- -
  ------- --------
-

--- -
  ---- -------
-

-- -------- -------
   -------------------------------------------------------------------------- --

---
 - ------ --- ------ -- ------ ------ ----- -- -- ---
 --

--- -
  ------------- -----
-

-- -----
   -------------------------------------------------------------------------- --

---
 - -- ------ --- ---- ------ -- --- ---------
 - -- ------ --- ------ -- ------- --- -------
 --

-------
------
---------
-------
-------- -
  ------------ -------- -- - --
  ---------- ----- -- - --
  ------------ ----- -- - --
  ------- -- -- - --
-

---
 - ---- --- -------- -- ---
 - -- ---- --- -------- -- -----
 --

-------
----- - -- - --
  --------- --------
-

---
 - ------ --- ----------- -- ---- --------- -- ----- -------- --- ---
 - -- ------ --- ----------- -- ---- --------- -- --------
 --

-------
------ - -- - --
  --------------- -----
-

---
 - ------- --- --------- -- ----- --------- ----- -- --- --- -------
 --

-------
----------------
---------------
--------------- -
  ------------------- -------
-

---
 - ------ --- ----- ------ --- ------- -- --------
 --

------------------ -
  ------------- -----
  -------- --
-

---
 - ------- --- ----- ------ ----- -- --- -------- ---- -- --------
 --

--------------- -
  -------- --- ------ -----------
-

---
 - ------- --- ---- -------- -- ---- --- ---
 --

--------------------------- -
  ------ --------
  -------- -----
-

------------------ -
  ------ --------
  -------- -----
-

---------------------- -
  ------ --------
  -------- -----
-

----------------- -
  ------ --------
  -------- -----
-

------------- -
  ------ --------
  -------- -----
-

---
 - -- ------- --- --------- -- ----- --------- ----- -- --- --- -------
 - -- ------ ---- ---------- -- --------- -- -------
 --

---------------------------- -
  ------------------- ------- -- - --
  ----- -------- -- - --
-

-- -----------
   -------------------------------------------------------------------------- --

--
 - --- --- ------- ------- -- ----- -- ---- --- --------
 --

------- -
  -------- ------
-

--
 - --- --- ------- ------- -- --- ---------
 --

------- -
  -------- ----------
-

-- ----
   -------------------------------------------------------------------------- --

---
 - --- --- ------- ------- -- -- ----
 --

-------- -
  -------- -----
-

---
 - --- --- ------- ------- -- -- ---
 --

-------- -
  -------- -----
-

3. Reset.css

Reset.css 是一种相对轻量的 Reset 技术，由人称重工的开发者 Yahoo! 提出。与 Eric Meyer Reset 和 Normalize.css 不同，Reset.css 将所有元素的默认样式都设置为一个共同的基准值。它主要特点包括：

  • 设置 margin 和 padding 为 0
  • 重置默认的字体样式和大小
  • 还原链接样式和表单样式

由于 Reset.css 只是将样式重置到一个基准值，因此可能需要进行更多的额外定制。下面是 Reset.css 的示例代码：

-- ---- - --- ------- --
-- ----- --

----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ----- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- -- -
    ------- --
    -------- --
    ------- --
    -------- --
    ---------- -----
    --------------- ---------
    ----------- ------------
-

---- -
    ------------ --
-

--- -- -
    ----------- -----
-

----------- - -
    ------- -----
-

------------------ ----------------- --------- ------- -
    -------- ---
    -------- -----
-

------ -
    -------- --
-

--- -
    ---------------- -----
-

--- -
    ---------------- -------------
-

----- -
    ---------------- ---------
    --------------- --
-

-- ----- ---- --

---- -
    ------------ ----- ------ ---------- ------ --------- ---- ---- ---------- ------- ---------- ----- ----- -----------
    ------ -----
    ---------- -----
-

--- --- --- --- --- -- -
    ---------- -----
    ------------ -------
-

------ --------- ------- ------ - -- ----------------------- -------------------- --
    ------------ --------
    ---------- --------
    ------------ --------
-


------- ---------- -------- -------- -
    ------ --------
    ---------------- -----
-

--------------- -
    -------- ----
    -------- ------
    ------- --
    ------ -----
    ----------- -------
-

-- ---- ---- - ------- --
------ -
    ------------------- -----
   ---------------- ------
   ----------- -----
-

---------
    ------------
-

4. 总结

在使用 CSS Reset 技术时，我们应该根据项目需要选择合适的 Reset 技术来规范化浏览器的默认样式。如果需要完全控制页面样式，可以选择 Eric Meyer Reset，如果需要快速而不破坏默认样式，可以选择 Normalize.css，如果需要较灵活的 Reset 方案，则可以使用 Reset.css。

总的来说，无论选择哪种 CSS Reset 技术，我们都应该了解它们的优缺点并适度定制，从而提高页面的可维护性和可靠性。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/664deca9d3423812e4dde8c4

阅读全文

猜你喜欢

  • TypeScript 中的类 (Class) 详解

    在 TypeScript 中，类 (Class) 是一种重要的概念。类是一组具有相同属性和方法的对象的抽象模板。本文将详细介绍 TypeScript 中的类，包括类的定义、构造函数、继承、访问修饰符、...

    5 个月前
  • Fastify 避坑指南：注意与 MongoDB 的集成问题

    在快速开发现代化 Web 应用程序的过程中，Fastify 是一个非常流行的 Node.js Web 框架。而 MongoDB 是一个广受欢迎的 NoSQL 数据库。

    5 个月前
  • Serverless 应用之 Lambda 函数调试指南

    引言 Serverless 是一种当前最流行的云计算技术，它的优点包括不需要运维、按需分配资源、快速部署等。然而，在开发 Serverless 应用时，常常会遇到调试困难以及开发效率低下的问题。

    5 个月前
  • Server-sent Events: 如何优化事件驱动流式传输？

    简介 Server-sent Events (SSE) 是一种基于 HTTP 的单向数据流协议，它通过浏览器与服务器之间的长时连接，实现了服务端实时向客户端推送数据的能力。

    5 个月前
  • 如何在 Chai 中使用 Sinon.js 进行 Stub 和 Mock 对象的测试？

    如何在 Chai 中使用 Sinon.js 进行 Stub 和 Mock 对象的测试？ 前端开发是一个非常繁忙和需要深入学习的领域。为了应对不同的测试需求，前端开发人员需要掌握使用不同的 Javasc...

    5 个月前
  • CSS Grid 布局：如何使用 grid-template-rows 属性自适应调节行高

    CSS Grid 布局是一种强大且灵活的布局方式，可以帮助我们轻松地创建复杂的网页布局。其中，grid-template-rows 属性是用来定义网格行高的，我们可以使用它来实现自适应调节行高的效果。

    5 个月前
  • 使用 Tailwind CSS 创建高效表格样式的技巧

    表格是页面中常见的元素，其样式既能给页面带来美观的外观，又能帮助用户更好地浏览和阅读内容。而 Tailwind CSS 是一款快速、高度可定制的 CSS 框架，它为前端开发者提供了许多实用的工具类，方...

    5 个月前
  • Docker 容器 DNS 解析问题的解决方法

    在使用 Docker 容器时，经常会遇到容器无法解析 DNS 的问题，这会导致容器无法访问外部服务或者无法被外部服务访问。本文将介绍如何解决 Docker 容器 DNS 解析问题，并提供一些实用的解决...

    5 个月前
  • 如何在 Fastify 中设置 Cookie ？

    Fastify 是一个极快的 Web 框架，它拥有优秀的架构、强大的插件系统以及对高并发的支持。而在 Web 开发中，Cookie 是一个非常重要的特性，它可以用来保存用户登录状态、个性化的设置等等。

    5 个月前
  • 实战教程：Redux-persist 持久化存储方案

    简介 Redux-persist 是一种 Redux 的持久化方案，它通过将 store 中的数据序列化到本地存储中，实现了一种简单、易用的数据持久化能力。 在使用 Redux 进行前端开发时，我们通...

    5 个月前
  • 在 Cypress 中怎样处理 JavaScript 对 input 元素的限制？

    在 Cypress 中怎样处理 JavaScript 对 input 元素的限制？ 作为一个 Web 开发者，你可能经常需要处理来自用户输入的各种限制和验证，其中最常见的就是对 input 元素的限制...

    5 个月前
  • ESLint 插件推荐，让你的开发效率更上一层楼

    在前端开发中，代码质量和风格的一致性对于项目的可维护性和可扩展性有着至关重要的影响。ESLint 是一款经典的 JavaScript 代码检查工具，利用它可以保证团队的代码质量和风格的一致性。

    5 个月前
  • 如何在 Kubernetes 中使用 Fluentd 记录应用程序日志

    在微服务应用程序中，日志是非常重要的。通常，为了更好地了解应用程序的运行状态和问题，我们需要记录应用程序日志并对其进行监控和分析。在 Kubernetes 中，我们可以使用 Fluentd 收集应用程...

    5 个月前
  • SPA 应用中的多级路由实现方法

    在 Web 应用中，路由是一个通用的概念，SPA 应用同样需要使用路由来展示多个页面。在前端开发中，使用路由可以帮助我们实现页面的视图切换以及管理应用的状态。本文将介绍 SPA 应用中的多级路由实现方...

    5 个月前
  • 通过 Express.js 创建 RESTful API

    如果你是前端工程师，那么你很可能需要与后端程序员合作，共同开发一个完整的 Web 应用程序。在这个过程中，RESTful API 是一个必不可少的组成部分。在本文中，我们将使用 Express.js ...

    5 个月前
  • Chai 教程：如何测试 AngularJS 应用？

    前言 在前端开发中，测试是不可或缺的一个环节。较为完善的测试体系可以有效地保证代码的质量，降低开发、维护成本，也可以让我们更加自信地修改代码。在 AngularJS 开发中，我们可以使用 Chai 这...

    5 个月前
  • Lit-Element 和 Custom Elements 的使用

    前言 在现代前端开发中，组件化极大地促进了代码的复用和维护性。Web Components 标准的引入使得前端开发人员可以自定义 HTML 标签并封装可复用的 UI 组件。

    5 个月前
  • CSS Grid 布局：如何使用 grid-template-areas 属性控制网格区域的位置

    CSS Grid 布局是在 Web 开发领域中最近引入的一种布局方式，它提供了一种强大的灵活性和控制性来设计各种网页布局，并且能够更方便地控制不同元素在不同页面间的位置变化。

    5 个月前
  • 在 React Native 应用中使用 Material Design

    在 React Native 应用中使用 Material Design 随着移动端应用的不断发展，用户对应用的界面和使用体验也越来越重视，而Material Design作为Google发布的设计标...

    5 个月前
  • Angular 中集成 Google Maps 的完整教程

    Google Maps 是一款非常实用的地图应用，能够帮助我们快速地找到自己所需要的地点。而 Angular 是一种流行的前端框架，它将现代 JavaScript 与 HTML 和 CSS 相结合，提...

    5 个月前

相关推荐

    暂无文章