熟悉 normalize.css,更好使用 reset.css

在网页开发中,CSS 是不可避免的一部分。我们通常会使用一些预先定义好的 CSS 样式,以优化和规范我们的开发工作。其中,reset.css 和 normalize.css 是两个常见的 CSS 样式库,它们是用于重置和规范默认 CSS 样式的工具,而我们需要正确地使用它们,才能让我们开发出更好的网页。

reset.css 和 normalize.css 的介绍

reset.css 是最早的 CSS 样式重置库之一,它在页面加载时会将所有标签的默认外观和排版属性全部重新设置为零。这样,我们在写 CSS 样式的时候,就可以更好地控制各个元素的样式,也避免了浏览器之间样式的差异。

而 normalize.css 更加注重保持浏览器之间样式及表现一致,它会保留一些默认的样式,同时会修复和改进一些浏览器的不一致性和缺陷,以达到更好的浏览器兼容性。

为什么我们需要使用 reset.css 或 normalize.css

在网页开发中,浏览器的差异是常见的问题。不同的浏览器对同一个标签的默认样式可能会有很大的不同,如 margin、padding、font-size 和 line-height 等属性。

由于 reset.css 会将默认样式重置为零,我们需要在写样式时再次设置,这样就可能导致代码量增加和样式不规范,而且一些特殊的元素样式也无法应用。

而 normalize.css 能够保持一些默认样式,取代了 reset.css,使得我们写 CSS 样式的时候,更加规范,避免了不必要的样式设置。

如何正确使用 reset.css 和 normalize.css

不论是 reset.css 还是 normalize.css,我们在使用之前需要先了解其工作原理和特性,以及它和我们的开发需要之间的关系。也就是说,我们需要根据我们所需要完成的任务,来选择使用 reset.css 或 normalize.css,以达到开发的优化和规范。

如果我们希望通过自己的样式定义来控制网页的各种元素,可以使用 reset.css,并在后续的开发过程中慢慢的修改。而如果我们希望保持各个浏览器之间表现的一致性,最好使用 normalize.css,因为它遵循了 W3C 标准。

示例代码

在使用 reset.css 或 normalize.css 时,我们只需要将相关的 CSS 文件链接到 HTML 文件即可。

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

需要注意的是,reset.css 和 normalize.css 不能同时使用,因为它们是相对的,同时使用会产生样式冲突,使得网页的样式失控。

总结

reset.css 和 normalize.css 都是很重要的 CSS 样式库,我们只需要深入了解它们,然后根据我们自己的开发需要去选择其中之一,就能够更好地构建一个优化和规范的网页了。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6485b77f48841e98944738e8


猜你喜欢

  • Kubernetes Horizontal Pod Autoscaling 实战

    在现代应用程序中,自动扩展可以帮助我们更好地管理负载和成本。Kubernetes 提供了自动扩展的功能来帮助我们更好地协调 Pod 数量和集群的资源利用率。在这篇文章中,我们将深入介绍 Kuberne...

    1 年前
  • 在 ES11 中使用 import.meta 可以做什么?

    在 ES11 中使用 import.meta 可以做什么? ES11 是 ECMAScript 最新的版本,也被称为 ES2020。在这个版本中,新增了很多有趣的特性和语法,其中一个比较有意思的就是 ...

    1 年前
  • Sequelize 结合 koa2 实现数据访问与操作

    前言 在现代 Web 应用中,数据操作是非常重要的一环。而数据操作则需要使用 ORM(对象关系映射)库来管理数据库的访问和操作。Sequelize 是一款非常强大且流行的 ORM 库,而 koa2 则...

    1 年前
  • ECMAScript 2021 中的 Template Literal 标记函数

    前言 在 ECMAScript 2015 规范中,我们首次见到了模板字符串(Template Literals),它们为我们提供了一种以一种更加放松、更加易于阅读的方式,去动态地构建字符串。

    1 年前
  • Serverless 如何实现自定义域名?

    随着云计算技术的快速发展,越来越多的应用程序选择将其部署在 Serverless 架构上,以实现更高效的开发和部署体验。Serverless 架构是基于云计算技术的一种新型应用构建和部署方式,它提供了...

    1 年前
  • Jest 测试中的 mock 实际应用场景及实现方法

    在前端开发过程中,单元测试是非常重要的一个环节。而在测试过程中,我们常常需要使用 mock 来模拟一些数据或者方法。Jest 是一个非常强大的测试框架,自带有 mock 功能,下面我们将介绍 Jest...

    1 年前
  • Docker 容器退出后如何保留数据

    在使用 Docker 进行开发时,我们常常需要启动一些容器来运行服务。但是,容器退出后,如果没有做好数据的持久化处理,那么容器内的所有数据都会被清空,这无疑会给我们带来极大的不便。

    1 年前
  • 如何在 Chai 中使用 sinon.js 进行 mock 和 stub 测试

    在前端开发中,测试是不可避免的一环。其中,mock 和 stub 测试是常用的两种方式,可以用来验证代码的正确性和可靠性。而在 JavaScript 中,sinon.js 很容易实现 mock 和 s...

    1 年前
  • Koa 中 Web 缓存机制的讲解及使用方法

    Web 缓存是 Web 应用中一个重要的组成部分,可以帮助优化应用性能和减少网络负载。在 Koa 中,使用 Web 缓存机制可以更好地提升应用的性能,减少资源请求次数。

    1 年前
  • Material Design 中卡片式布局的交互效果实现

    Material Design 是一种由 Google 推出的视觉语言,它拥有一系列统一的设计规范,包括颜色、图标、字体、动效等,旨在为不同设备的用户提供一致性的体验。

    1 年前
  • 如何在 LESS 嵌套规则中使用 class 名

    LESS 是一种 CSS 预处理语言,它增加了很多 CSS 缺失的功能,比如变量、嵌套、Mixin 等。LESS 嵌套是其中一种强大的功能,允许我们组织样式的结构,并可读性更强。

    1 年前
  • ES7 中的 Async Clipboard API 详解

    在现代网站开发过程中,剪切板是不可或缺的功能之一。我们经常需要从网站上复制文本、图像和其他数据。为了更好地支持这一功能,ES7 引入了 Async Clipboard API,这是一个非常强大的 AP...

    1 年前
  • 在 Cypress 测试中使用 JavaScript Promise

    前言 Cypress 是一个流行的前端端到端测试框架,它的 API 使用起来十分友好直观。它内置了大量的命令和钩子函数用于编写测试,例如 visit、get、type 等,同时也支持自定义命令和钩子函...

    1 年前
  • PWA 以及 Service Worker 工作流程与机制详解

    什么是 PWA? PWA 是 Progressive Web App 的缩写,指的是一种能够提供类似原生应用体验的 Web 应用,具有即时加载、离线访问、推送通知等功能。

    1 年前
  • React 中的组件通信:传递方法或状态?

    React 是一款前端框架,它的主要特点是组件化和虚拟 DOM。在 React 中,组件通信是一个非常重要的问题。通常来说,组件之间的通信可以通过两种方式来实现:一种是传递方法,另一种是传递状态。

    1 年前
  • Custom Elements 如何实现拖拽功能

    在前端页面中,拖拽是一种常见的交互方式。为了方便用户在网页上拖拽元素,我们可以通过使用 Custom Elements 自定义元素,使用 JavaScript 实现拖拽功能。

    1 年前
  • 如何使用 Mocha 测试 React Native 应用?

    在前端开发中,Mocha 是一个非常著名的 JavaScript 测试框架。React Native 是一种流行的跨平台移动应用开发框架,使用它可以快速构建 iOS 和 Android 应用程序。

    1 年前
  • MongoDB 中 find() 函数与 findOne() 函数的区别

    MongoDB 是一种 NoSQL 数据库,用于存储非结构化和半结构化数据,它是一个高可扩展的数据库,许多 Web 应用程序都使用它。在 MongoDB 中,有两个函数可以用于查询数据:find() ...

    1 年前
  • Mongoose 中多并发操作下的解决方案

    在某些场景下,我们需要对同一数据源进行多并发的读写操作,如果直接使用 Mongoose 进行操作,可能会产生一些潜在的问题。在这篇文章中,我们将介绍多并发操作下的常见问题及解决方案,并结合示例代码进行...

    1 年前
  • Web Components如何实现文件上传?

    文件上传是Web应用程序中常见的功能之一。在Web Components中,我们可以通过使用HTML5的File API和XMLHttpRequest对象来实现这个功能。

    1 年前

相关推荐

    暂无文章