CSS Reset 的正确使用方法和细节注意

背景

在前端开发中，我们经常会遇到不同平台的浏览器对同一个样式的呈现具有差异的情况。这个问题可能会导致页面的排版错乱，影响到用户的使用体验。为了解决这一问题，我们通常使用 CSS Reset 进行页面样式的初始化。

CSS Reset 是指在编写样式表前，将所有的浏览器默认样式重置为同一标准的样式进行统一呈现。它可以清除浏览器默认的样式，从而帮助我们更方便地使用自定义的样式。

然而，CSS Reset 的正确使用方法和细节需要我们注意，本文将会介绍如何使用 CSS Reset，并探讨 CSS Reset 中的一些细节和注意事项。

为什么要使用 CSS Reset

浏览器默认样式是不可避免的，不同浏览器对同一标签的样式定义也不同。这就导致了样式在不同浏览器中呈现效果不一致，甚至布局错乱。而 CSS Reset 便是为了解决这一问题而诞生的。

最初的 CSS Reset 是由 Eric Meyer 发明的，其主要目的是消除浏览器间的差异，使网页在不同浏览器上呈现出相同的样式。目前，CSS Reset 已经成为前端开发必不可少的一部分，在几乎所有的项目中都可以看到它的身影。

各种 CSS Reset 的优缺点

在 CSS Reset 的使用上，由于不同的 CSS Reset 库会采用不同的方案来重置默认样式，所以我们需要根据实际情况选择适合项目的 CSS Reset 库。目前比较流行的 CSS Reset 库主要有三种：

Eric Meyer Reset

简介：

Eric Meyer Reset 是最早的 CSS Reset 其创始人是 CSS 大师 Eric Meyer，它非常精简，只针对一些浏览器对一些 HTML 元素的默认样式设置，而对于这些元素的语义及内容结构不做任何调整。因此，如果开发时不太注意可能会影响到部分元素的语义。

优点：

  • 得到广泛的应用和认可
  • 良好的兼容性
  • 提供了一个绝对性(X,Y,Z坐标为0)的基准线

缺点：

  • 针对一些元素的默认样式设置，不够全面
  • 未完全重置元素的语义和结构

示例代码：

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

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

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

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

Normalize.css

简介：

Normalize.css 是与 Eric Meyer Reset 类似的另一种 CSS Reset。它在 Eric Meyer Reset 的基础上增加了许多修复样式，更为全面的针对不同浏览器最基本的对HTML元素样式进行定制。相对于 Eric Meyer Reset，Normalize.css更注重框架并起到了框架的作用，而且它的样式规则选择器更加严谨。

优点：

  • 解决了 Eric Meyer Reset 的不足
  • 对一些 HTML 元素的样式进行修复，得到更一致的样式效果
  • 良好的兼容性

缺点：

  • 文件体积较大，需要下载

示例代码：

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

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

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

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

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

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

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

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

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

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

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

原始 CSS Reset

简介：

相较于 Eric Meyer Reset 和 Normalize.css，原始 CSS Reset 更为显式。它会删除所有的默认样式，并对所有 HTML 元素进行定制。在使用这种 CSS Reset 的情况下，我们需要重新自己定制样式。

优点：

  • 删除了所有默认样式，保证了更高的样式一致性
  • 可以自由定制每个 HTML 元素的样式

缺点：

  • 缺乏统一的样式规范
  • 配置比较繁琐，需要重新自己定制样式

示例代码：

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

CSS Reset 的正确使用方法

CSS Reset 库的引入

在项目中使用 CSS Reset 库之前，我们需要先将库引入到项目中。我们可以通过 CDN 引入许多 CSS Reset 库，也可以将库下载到本地，然后引入。

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

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

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

样式的覆盖

虽然 CSS Reset 可以帮我们删除默认样式，但是在某些情况下，我们还需要对某些元素重新定义样式，以满足布局和设计的要求。在 CSS Reset 库生效的前提下，我们可以通过为元素添加样式来覆盖默认样式。

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

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

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

尽量避免浏览器的怪癖

在使用 CSS Reset 的过程中，我们不仅要考虑如何适配不同的浏览器，还要考虑浏览器本身的怪癖。有时候，浏览器的 Bug 或 Bug 修复可能导致无法生成所需的效果，解决这个问题就需要进行错误检测和修复。

CSS Reset 的细节和注意事项

更具体的选择器能提高速度

选择器的具体性（Specificity）是指选择器与元素匹配时的权重大小，权重越大的选择器匹配的优先级也越高。选择器具体性定义的是选择器各部分权重的总和，因此，可以在选择器上添加更具体的选择器来提高匹配精度，避免二次匹配，提高速度。

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

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

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

不清除float的元素会自动包裹

当一个元素（如 div）嵌套在另一个元素中时，如果内部元素采用了浮动定位，外部元素没有使用清除浮动，就会出现漏斗状的效果，导致排版错误，影响美观和用户体验。

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

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

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

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

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

文字排列时要使用垂直对齐

在文字排列时，如果使用默认的对齐方式，文字可能会出现偏移或者有些字母会超出边界，导致页面样式难以控制。因此，在使用文本时，我们需要使用垂直对齐属性来控制文字的排列位置，保证排版效果的美观和稳定。

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

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

总结

本文详细介绍了 CSS Reset 的使用方法和注意事项，包含了三种流行的 CSS Reset 库的优缺点和示例代码，并探讨了在使用 CSS Reset 时需要注意的细节和技巧。在实际项目中，选择合适的 CSS Reset 库，合理地使用样式覆盖和其他技巧，既可以提高页面的稳定性和美观度，又可以提高前端开发效率和用户体验。

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

阅读全文

猜你喜欢

  • ES6 的迭代器 (Iterator) 和生成器 (Generator) 使用技巧

    迭代器 (Iterator) 和生成器 (Generator) 是 ES6 中非常重要的两个新特性，它们的出现极大地简化了 JavaScript 编程中对于集合型数据的操作。

    1 年前
  • 解决 RESTful API 中的数据结构模型问题

    随着互联网的飞速发展，RESTful API 已经成为了前端开发中不可或缺的一部分。RESTful API 不仅可以让我们方便地获取后端提供的数据，还能够让我们更好地维护代码。

    1 年前
  • Mongoose 前端与后端数据加密与解密技巧分析

    在现代 Web 应用程序中，数据加密和解密已经成为必不可少的部分，尤其是在涉及到用户数据和隐私的时候。Mongoose 是一个流行的 MongoDB 数据库的 ODM（对象数据映射），提供了方便的数据...

    1 年前
  • 在 Promise 中如何进行 HTTP 请求的鉴权

    在 Promise 中如何进行 HTTP 请求的鉴权 在前端开发中，HTTP 请求是不可避免的一部分。而在现代化的前后端分离架构中，前端通常需要从后端获取数据，而进行请求时必须进行鉴权操作，确保用户具...

    1 年前
  • Headless CMS 中集成 API 网关的最佳实践

    随着互联网技术的不断发展，越来越多的企业开始关注 Headless CMS 这一前端开发领域的工具。Headless CMS 是一种内容管理系统，它提供了一个基于 API 的数据交互接口，开发者可以利...

    1 年前
  • Chai.js 邮件发送失败原因及其解决方法

    Chai.js 邮件发送失败原因及其解决方法 在前端开发中，常常需要使用邮件发送功能。然而，有时候邮件发送会失败，这给开发带来了种种困扰。本文将介绍 Chai.js 邮件发送失败的原因及其解决方法，以...

    1 年前
  • Socket.io 中如何实现多浏览器和多设备间的实时通信

    在现代化的互联网世界中，随着应用场景的多样化，实时通信的需求日益增加。而 Socket.io 是一个为实时应用提供跨平台，事件驱动的双向通信库。它可以用于浏览器和 node.js 服务器端，使得多浏览...

    1 年前
  • RxJS 中的 combineLatest 操作符用法详解

    在前端开发中，我们经常需要处理多个数据流的协同工作，比如用多个 http 请求获取多个不同的数据源，然后组合在一起渲染界面，这时候，我们需要使用一些特殊的操作符来帮助我们完成这些复杂的任务。

    1 年前
  • Vue.js 和 Bootstrap：一起使用更佳的 Web 开发

    Web 开发中使用框架和库可以大大提高开发效率和质量，Vue.js 和 Bootstrap 是目前非常热门的开发工具。Vue.js 是一个前端 MVVM 框架，通过数据绑定和组件化开发，让开发者可以更...

    1 年前
  • JavaScript 中 let 命令的用法及注意事项

    在 JavaScript 中，我们通常使用关键字 var 来声明变量。但是，自从 ES6（也称为 ECMAScript 2015）发布之后，新的变量声明方式 let 和 const 也成为了可选的选项...

    1 年前
  • Fastify 性能优化：使用 Precompression 和 Compression 插件

    前端性能优化的必要性 随着前端技术的发展，Web 应用的前端越来越重要。但是，前端性能的优化却是一个永恒的话题。网络速度慢、DOM 操作频繁、JavaScript 执行效率低下等原因都可能导致前端性能...

    1 年前
  • ES7 中的 Unicode 正规化详解

    ES7 中的 Unicode 正规化详解 Unicode 是一个标准化的字符编码系统，目的是解决全球化的问题，允许计算机处理多种语言字符。在 JavaScript 中，Unicode 也是一个重要的概...

    1 年前
  • PWA 离线缓存功能在实际开发中的应用

    Progressive Web App (PWA) 是一种新型的 Web 应用程序，它可以通过 Service Worker 和 Cache API 实现离线缓存功能。

    1 年前
  • 如何在 Express.js 中实现基于 OAuth2 的身份验证

    OAuth2 是一种用于授权的开放标准，它允许用户向第三方应用程序授权访问受保护的资源，同时不必将用户名和密码传递给第三方应用。在 Web 开发中，OAuth2 常被用于身份验证和授权。

    1 年前
  • Kubernetes 上的高可用 MySQL 集群部署指南

    在现代应用程序开发中，高可用性是一个至关重要的需求。对于数据库系统来说，高可用性是非常重要的，尤其是当数据库作为核心数据存储的时候。随着 Kubernetes 的迅速发展，使用 Kubernetes ...

    1 年前
  • SASS 处理第三方样式库的方法大全

    前端开发中，使用第三方样式库可以提高开发效率和代码质量，但是第三方样式库的样式也需要作出调整，以适应自己的项目需求。本文将介绍如何在 SASS 中处理第三方样式库。

    1 年前
  • Next.js 如何使用本地化（i18n）？

    在现今开发的互联网时代，软件的全球化是一个不可回避的趋势。随着互联网的发展，全球用户的需求越来越复杂，多种语言的支持就成为了一个非常重要的需求。有鉴于此，本文将介绍如何在 Next.js 中使用本地化...

    1 年前
  • Koa.js 中如何进行性能优化

    Koa.js 是一个 Node.js 的框架，它使用了 ES6 的语法并且非常轻量级，有良好的可扩展性和可维护性。但是在项目开发中，我们经常需要考虑如何进行性能优化，以提高应用程序的运行效率和响应速度...

    1 年前
  • CSS Flexbox 下的图片排版与对齐技巧详解

    前言 在 Web 开发中，经常需要用到图片来展示产品信息或者美化页面。但是图片排版和对齐往往会带来一些麻烦和困惑。在 CSS 中，Flexbox 是一种非常强大和灵活的布局方式，可以帮助我们轻松解决这...

    1 年前
  • AngularJS 单页应用程序的性能优化技巧

    AngularJS 是一个优秀的前端开发框架，它被广泛应用于单页应用程序（SPA）开发中，然而，在开发 AngularJS 应用程序时，我们经常会遇到性能方面的问题。

    1 年前

相关推荐

    暂无文章