CSS中“重置”和“规范化”之间的区别

CSS（层叠样式表）是一种样式表语言，用于描述 HTML 或 XML 文档（包括 XML 方言，如 SVG、MathML 或 XHTML）的表示。 CSS 指定元素应如何出现在屏幕、纸上、语音或其他形式的媒体中。

在使用 CSS 时，开发人员可能会遇到浏览器设置不一致的问题，例如默认行高、边距和标题字体大小等。例如，一些浏览器使用左边距来缩进无序和有序列表，而其他浏览器则使用左边距。标题的上下边距略有不同，缩进距离不同，等等。这就是重置和规范化CSS 的用武之地，以使该默认值在浏览器之间看起来更加一致，从而减少与浏览器默认值作斗争的时间。

让我们简要介绍一下这些技术：

重置 CSS： CSS 重置是您在其他样式之前加载以删除内置浏览器样式的一组样式。每个浏览器都有自己的用户代理样式表，它用来使无样式的网站更具可读性。例如，大多数浏览器默认将链接设为蓝色，将访问过的链接设为紫色，为表格添加边框和填充，将各种字体大小应用于H1、H2、H3以及几乎所有内容，并对几乎所有内容应用特定数量的填充。

你有没有想过为什么提交按钮在不同的浏览器中显示不同？

很明显，这让 CSS 作者非常痛苦，因为他们无法弄清楚如何让他们的网站在每个浏览器中看起来都一样。 CSS 作者可以使用 CSS Reset 将每个浏览器的样式重置为 null，尽可能减少跨浏览器的差异。然后，您可以使用您在重置时建立的一致基础重新设置您的内容样式，确保浏览器默认呈现 HTML 的差异不会影响您！

使用 CSS 重置，CSS 作者可以强制每个浏览器将其所有样式重置为 null，从而尽可能避免跨浏览器的差异。

例如，为了将所有元素设置为具有相同的字体粗细和样式，我们使用：

font-weight: inherit;
font-style:  inherit;
font-family: inherit;

但是，Internet Explorer 浏览器不支持继承，因此不会发生值的自动继承，并且在 IE 上查看时 UI 会出现损坏。重置有助于在维护 UI 的同时克服此类问题。

示例：在这个示例中，我们将看到如何使用将在我们的其他样式之前加载的重置 CSS 技术来删除内置的浏览器样式。

重置.html

HTML

    
  
      
    

  


  
GeeksForGeeks
  
Hello There!
  
We Are Performing Reset CSS
  
It Resets the Default CSS
  

输出：

重置 CSS

规范化 CSS：规范化 CSS 提高了浏览器用户代理的 HTML 元素默认样式的跨浏览器一致性。它是标准 CSS 重置的 HTML5 友好替代品。

规范化的目的是：

• 保留默认有用的浏览器而不是删除它们。
• 标准化各种 HTML 元素的样式。
• 更正常见浏览器的错误和不连贯性。
• 通过细微的改进提高可用性。
• 使用注释和详细文档来解释代码。

现在让我们继续解决这两种技术中什么更好以及应该使用什么来平滑 CSS 的疑问。规范化在非样式化所有内容上保持有用的默认值，并且不会弄乱您的开发工具窗口。此外，重置旨在去除元素上的所有默认浏览器样式。例如，所有元素的边距、填充、字体大小都被重置为相同。您将不得不为常见的印刷元素重新声明样式，另一方面，规范化保留有用的默认样式，而不是剥离所有样式。规范化 CSS 是一种比旧的重置 CSS 更新的技术，因此它是模块化的且易于使用。最后，现在我们知道了重置和标准化之间的区别，我们知道它们没有太大区别，因为它们都在努力防止网页 UI 的破坏。这只是这两种技术使用的方法问题，您可以根据这些方法决定您应该在工作中使用哪些方法。

示例：在这个示例中，我们将看到如何使用规范化 CSS 技术。

规范化.html

HTML

  

    
      
    

  


    
GeeksForGeeks
    
Hello There!
    
We Are Performing Normalize CSS
    
It Normalizes the Default CSS
  

输出：

规范化 CSS

以下是重置和标准化之间的差异表：

Resetting	Normalizing
Resets all thehas styles that come with the browser’s user agent.	Provides cross-browser consistency in the default styling of HTML elements which are provided by the browser’s User Agent.
Resetting have a big chain of selectors, and they make a lot of unnecessary overrides in the styling.	Not many big chains of CSS Selectors to be seen while normalizing as it utilizes User Agent’s styles.
It is hard to debug as it is nearly impossible to identify bugs.	Debugging is easy while normalizing
Resetting is Non-Modular (no section breaking in styles)	Normalizing is Modular (styling is divided into sections for ease)