CSS Reset 的历史及其作用

在前端开发中，CSS的重要性不言而喻。但是，每个浏览器都有其自己的默认样式，这往往会导致开发者的样式不一致，因此有了 CSS Reset。

什么是 CSS Reset?

CSS Reset的主要目的是在不同的浏览器中统一各元素的默认外观（也被称为“User Agent Style Sheets”），同时在不同的浏览器中达成一致的外观效果。通过在 CSS 中重置或覆盖默认样式，可以避免浏览器默认的样式对样式的干扰，使开发者能够更加自由地控制和修改样式。

CSS Reset 的历史

在很长一段时间中，网站开发者使用的 CSS Reset 的基础都是 Eric Meyer 的“Reset CSS”，该方案是将每个元素的所有属性重置为0，以达到在所有浏览器上相同的样式外观。随着 HTML5 和语义化的出现，开发者们逐渐发现，使用"Reset CSS"反而会增加开发成本，因为它将元素的语义化都视为相同的，并且将必要的元素属性进行了删除，这不利于SEO和移动设备优化。

随着 CSS处理的逐渐完善，崭新的 CSS Reset 方案也随之诞生。例如，Normalize.css 和 Reset.css，两个 Reset CSS 常用方案，这些方案重视保留浏览器默认样式中的有用部分，并在不同浏览器上达成一致效果。

Reset.css 示例代码

Reset.css 可以使用下面这个示例代码，它是一种常见的重置 CSS：

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

Normalize.css 示例代码

Normalize.css 更好的示例代码，它是一种常见的归一化 CSS：

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

总结

总的来说，CSS Reset 的作用是为了在浏览器不同的默认风格之间定制自己的样式表。它允许设计师跨浏览器创建在视觉上一致的网站。不过，近年来，CSS Normalizr 已经出现，它可以使开发者更加智能地重置CSS。无论是哪种方案，都是 CSS 开发的重要组成部分，我们需要在实际生产中掌握和应用。

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

阅读全文

猜你喜欢

  • 使用 Express.js+Sequelize 构建 ORM 应用

    什么是 ORM？ ORM 是一种将对象模型与数据库模型进行映射的技术，它可以将数据库中的表映射成为代码中的对象，从而简化开发人员的工作。使用 ORM 可以使开发人员更加专注于业务逻辑的开发，而无需关注...

    1 年前
  • PWA 技术在智能家居中的应用案例

    前言 随着智能家居的快速普及，越来越多的人开始使用手机来控制家电设备。然而，传统的 Web 应用往往需要用户频繁切换页面，操作繁琐，用户体验不佳。针对这一问题，PWA 技术可以提供更好的解决方案。

    1 年前
  • React Router 的 history 模块学习笔记

    什么是 React Router？ React Router 是一个由 React 社区维护的路由库，它可以把页面的 URL 与组件的状态进行绑定，允许用户通过浏览器的前进和后退按钮在应用中进行导航。

    1 年前
  • 在 ES7 中使用 Promise.prototype.then() 处理异步操作

    异步操作的背景 在实际的前端开发中，异步操作非常常见，比如获取远程数据，异步更新界面等等。而与此同时，JavaScript语言本身的异步处理机制也随着时间的推移逐渐发展、完善。

    1 年前
  • TypeScript 中的联合类型

    TypeScript 是一种开源的编程语言，它是 JavaScript 的超集，扩展了 JavaScript 的功能，包括更好的静态类型检查、接口、泛型、枚举类型等。

    1 年前
  • Redis 中分页的实现技巧

    前言 Redis 是一种高效的内存型数据库，拥有多种数据结构的支持。在前端领域中，Redis 常用在缓存、会话管理、实时统计等方面。其中，分页的需求也很常见，在本文中，我们将介绍 Redis 中分页的...

    1 年前
  • 在 Next.js 中使用 MongoDB 数据库的方法

    简介 MongoDB 是一种文档数据库，不同于传统的关系型数据库，它的数据以 BSON 格式（Binary JSON）存储在集合（Collection）中。MongoDB 具有高可扩展性、高性能、无需...

    1 年前
  • Babel 为什么不能识别 JavaScript 的内置对象？

    前言 在使用 Babel 进行 JavaScript 代码转换的过程中，你可能会遇到一些类似于“'Promise' 没有被定义”的错误提示。那么这是为什么呢？为什么 Babel 不能直接识别 Java...

    1 年前
  • React 项目中使用 Reactstrap 组件时的技巧

    React 项目中使用 Reactstrap 组件时的技巧 Reactstrap 是一个基于 React 的 UI 组件库，它提供了许多易用的现成组件，方便前端开发人员进行快速开发。

    1 年前
  • GraphQL 与 React 的集成最佳实践

    GraphQL 是一种用于 API 的查询语言，可以让前端开发者更加灵活地请求数据。配合 React 使用，GraphQL 可以提升前端应用的性能以及开发效率。本篇文章将介绍如何将 GraphQL 集...

    1 年前
  • 新特性解析：ES11 新增的 Promise.allSettled 方法

    在 JavaScript 的 ES11 版本中，新增了一个 Promise.allSettled 方法，该方法可以让我们更加方便地处理 Promise 一起执行的情况，本次文章将会详细解析该方法的使用...

    1 年前
  • 从 Koa1 升级到 Koa2 的注意事项

    在前端开发中，Koa 是一款非常流行的轻量级 Node.js 框架，它被广泛应用于构建 Web 应用程序和 API 服务。Koa1 是早期版本的 Koa，而 Koa2 则是其后续版本，它引入了许多新功...

    1 年前
  • 避免 Server-Sent Events 连接超时的方法

    避免 Server-Sent Events 连接超时的方法 在前端开发中，Server-Sent Events（SSE）是支持服务器向客户端发送实时信息的一种技术。

    1 年前
  • 简单了解 Enzyme 的基本使用方法

    对于前端开发，测试是一个必不可少的环节。在 React 开发中，测试组件的功能是否正常也是十分重要的。而Enzyme是React测试工具中比较流行的一个，本文就带大家简单了解Enzyme的基本使用方法...

    1 年前
  • 使用 ES8 的 async/await 减少网络请求的并发

    前言 在前端开发中，与后端 API 交互是很常见的需求。通常我们会使用 Ajax 或者 Fetch API 等技术发起网络请求。但是，有时候会出现一个页面需要发起多个网络请求的情况，这时候就需要考虑网...

    1 年前
  • SASS 使用中出现的语法错误及解决方法

    前言 SASS 是一种强大的 CSS 预处理器，它可以让我们的 CSS 编写更加高效、可维护和可扩展。但是，在使用 SASS 过程中我们难免会遇到一些语法错误或者编译出错的问题，这篇文章将会详细介绍一...

    1 年前
  • Docker 中安装配置 MongoDB

    什么是 Docker？ Docker 是一种容器化技术，它可以让你将应用程序及其依赖项打包到一个可移植的容器中，然后可以部署到任何地方，从而消除了开发和部署的痛苦。

    1 年前
  • PM2 常见常见错误及解决方法

    什么是 PM2 首先，我们来介绍一下 PM2。PM2 是一个进程管理工具，用于管理 Node.js 应用程序的进程。它可以帮助我们简化应用程序的部署、监控以及维护等工作。

    1 年前
  • 使用 ES6/7/8/9/10 中的 Array.slice() 方法

    Array.slice() 是一个 JavaScript 数组方法，用于从给定的数组中返回一个新数组，包含原始数组的一部分。在 ES6/7/8/9/10 中，Array.slice() 方法不仅仅可以...

    1 年前
  • ES6 中的参数解构及其使用技巧

    ES6 中的参数解构及其使用技巧 在 ES6 中，参数解构是一种非常方便的语法，可以用来从一个对象或数组中，提取所需的值，然后赋值给对应的变量。它的作用更广泛，可以用在函数声明、函数参数、箭头函数等场...

    1 年前

相关推荐

    暂无文章