如何选择适合自己的 CSS Reset 方案

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

CSS Reset 是一个前端开发中经常用到的工具，它的任务是将浏览器对 HTML 元素的默认样式进行重置，目的是为了让所有浏览器展现出一致的样式，即使存在浏览器差异，也可以减少样式修正的工作量。但如何选择适合自己的 CSS Reset 方案，却是很多前端开发者不得不面对的问题。在此，我们将介绍不同的 CSS Reset 方案，并帮助你选择适合自己的方案。

normalize.css

normalize.css 是很多开发者首选的 CSS Reset 方案。它是由 Nicolas Gallagher 于 2011 年创建的，这个方案致力于消除浏览器之间标签的差异，使默认样式在不同的浏览器中保持一致。与其他 reset 方案相比，它不仅对简单而常见的元素进行了重置，还对很多其他元素进行了标准化的样式设置。因此，你不需要再去处理一些特殊的样式情况。但需要注意的是，normalize.css 并不能完全清除浏览器默认样式，在样式上，normalize.css 依然存在一些继承样式。normalize.css 的代码如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

reset.css

reset.css 是 Eric Meyer 创建的一个 CSS Reset 方案。相较于 normalize.css，reset.css 对所有元素进行了重置，例如，独立的样式表包含类似于下面这样的样式：

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

可以看到，reset.css 的代码可以清除所有的浏览器默认元素样式，显然，它的重置范围更广泛，其中大量的样式都无法通过 normalize.css 进行操作。但值得注意的是，reset.css 会导致很多元素失去预设的基本样式，需要经过重新设置才能正常使用。

其他方案

除了 normalize.css 和 reset.css 这两个主流方案之外，还有一些其他的 CSS Reset 方案，例如：

这些方案也可根据需求选择。

了解了不同的 CSS Reset 方案后，如何选择适合自己的呢？我们总结了几个建议：

  1. 对于跨浏览器相同的样式可选择使用 normalize.css；
  2. 对于更广泛的样式清除需求，可以选择 reset.css；
  3. 根据自身需要自行定制或修改 CSS Reset 方案；
  4. 选择已经得到广泛应用并持续更新维护的方案；
  5. 建议使用浏览器兼容性好、支持范围广的方案。

示例代码

下面是使用 normalize.css 和 reset.css 的示例代码：

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

希望以上的介绍能帮助你选择适合的 CSS Reset 方案，并减少你的样式修正工作。

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

阅读全文

猜你喜欢

  • Vue.js 中使用 mixins 混入功能实现组件代码复用的详细使用方法

    Vue.js 中使用 mixins 混入功能实现组件代码复用的详细使用方法 Vue.js 是一个开源的 JavaScript 框架，它被广泛应用于构建单页应用程序 (SPA)。

    1 年前
  • Mongoose 中 INNER JOIN 的实现方法

    Mongoose 是一种 Node.js 中 MongoDB 的对象模型库，可以方便地操作 MongoDB 数据库。在 MongoDB 中，没有传统的 SQL JOIN 操作，但是可以使用聚合操作实现...

    1 年前
  • 使用 Chai 进行 Express.js 应用程序集成测试

    Express.js 是一款流行的 Node.js 网络应用框架，具有高效、易用、灵活等特点，广泛应用于 Web 开发中。在应用开发过程中，集成测试是保证应用质量和稳定性的重要环节。

    1 年前
  • Node.js 中如何使用 Redis 实现消息队列

    引言 在日常的软件开发中，经常会遇到需要处理大量并发的任务的情形。为了合理利用系统资源，我们通常会将这些任务放入消息队列中，并由一组工作进程异步处理这些任务。 为了实现高效可靠的消息队列系统，我们可以...

    1 年前
  • # SSE 技术如何进行网络协议的扩展和升级

    SSE 技术如何进行网络协议的扩展和升级 SSE 技术，全称为 Server-Sent Events，是一种用于 Web 应用中的服务器推送数据的技术。它通过一种称为 SSE 协议的标准化协议来实现服...

    1 年前
  • 如何在 MongoDB 中使用计划任务 1301.Mongoose 连接 MongoDB 时的错误和解决方法

    在前端开发中，使用 MongoDB 数据库是一种非常常见的方案。而在使用 MongoDB 时，我们通常需要利用计划任务来定时执行任务，而 Mongoose 是一个非常常见的 MongoDB 官方驱动。

    1 年前
  • ECMAScript 2017 中的对象初始化器表达式

    随着技术的不断发展，ECMAScript 也在不断地更新，发布了 ECMAScript 2017 版本，其中一个重大更新就是对象初始化器表达式。在本文中，我们将深入探讨这个新特性，希望对前端开发者有所...

    1 年前
  • SASS 中如何使用！important 规则

    SASS 中如何使用 !important 规则 在前端开发领域中，SASS 是一个非常方便的 CSS 预处理器，它可以让我们更快地编写样式，并且更方便地维护代码。

    1 年前
  • 如何使用 CSS Reset 技术解决表格样式错乱问题

    在网页开发中，经常会用到表格来展示数据。然而，不同浏览器的默认样式不一，会导致表格的样式之间差异很大，表格样式错乱问题也就随之而来。幸运的是，我们可以使用 CSS Reset 技术来解决这个问题。

    1 年前
  • 使用 Django REST framework 进行应用性能测试

    使用 Django REST framework 进行应用性能测试 前言 在现代应用程序的开发过程中，性能是非常重要的因素之一。对于 web 应用程序，如果它的响应速度太慢或者不可靠，那么用户很有可能...

    1 年前
  • Service Worker 控制 PWA 应用的广告投放

    前言 现在，越来越多的公司在移动应用上投放广告。而这些广告可能会影响用户的体验，使用户离开应用。如何控制广告的投放，提高用户体验，尤其是在 PWA 应用中，成了一个需要解决的问题。

    1 年前
  • Sequelize 使用指南之事务处理

    在前端开发中，数据库事务是我们经常用到的技术之一。Sequelize 是一个优秀的 Node.js 框架，它提供了便捷的 ORM（对象关系映射）接口，可以帮助我们在 Node.js 项目中轻松地操作数...

    1 年前
  • 从Redux到Mobx发生了什么

    随着前端应用的复杂度越来越高，难以维护的问题也随之而来。Redux和Mobx这两个state管理工具，被广泛应用在前端领域中，帮助我们更好地管理前端应用的状态。 在本文中，我们将探讨Redux和Mob...

    1 年前
  • 解决 Docker 常见问题：Error response from daemon: conflict

    背景介绍 Docker 是目前最流行的容器化技术之一，可以将应用程序和其依赖项打包到一个容器中，使得应用程序可以跨平台运行。然而，在使用 Docker 时，经常会遇到"Error response f...

    1 年前
  • Serverless 应用如何实现请求限流和防刷？

    随着 Serverless 技术的发展和应用场景的不断扩大，前端项目从传统的单独部署演变为基于云函数的较为灵活的 Serverless 应用。然而，Serverless 应用由于架构的特殊性质，容易遭...

    1 年前
  • ES11 Array.from() 方法解决指针值无法处理的问题

    在前端工作中，我们经常需要处理数组数据。但是，有时候我们会遇到指针值无法处理的问题，导致代码不能够正常运行。这种情况下，ES11 的 Array.from() 方法可以给我们带来很大的帮助。

    1 年前
  • 如何在 Custom Elements 中使用 Redux 进行状态管理

    Web Components 是一种可以在多个项目和团队中共享的复用组件方式。Custom Elements 是 Web Components 的一种主要实现方式，它可以让我们创建自定义元素并在 HT...

    1 年前
  • Next.js 与 react-router 怎样协同工作？

    在前端开发中，Next.js 和 react-router 可谓是两大重要的工具。Next.js 是一个基于 React 的服务端渲染框架，支持静态网站生成和服务器端渲染。

    1 年前
  • Redis 入门教程（七）——Redis 持久化功能

    Redis 是一个开源的内存数据库，它支持多种数据类型，具有高性能、可靠性和灵活性等优点，得到了广泛的应用。在前面的介绍中，我们已经了解到 Redis 的基本使用方法，以及如何使用 Redis 进行数...

    1 年前
  • Angular 应用中如何使用动态组件创建对话框

    前言 在 Angular 应用中，弹出对话框是一种常见的 UI 设计模式，特别是在需要处理用户交互或呈现信息时，使用对话框可以有效地增强用户体验。使用 Angular 创建对话框有多种方法：你可以使用...

    1 年前

相关推荐

    暂无文章