Normalize.css和Reset CSS有什么区别？

Normalize.css 和 Reset CSS 的区别

基础概念

Normalize.css：

Normalize.css 是一种 CSS 文件，旨在使浏览器呈现所有元素更加一致，同时保留有用的默认样式。
它的目标是减少浏览器之间的差异，而不是完全消除它们。

Reset CSS：

Reset CSS 是一种 CSS 文件，旨在重置浏览器的默认样式，使所有元素的样式更加一致。
它的目标是消除浏览器之间的差异，通常会将所有元素的样式重置为统一的样式。

类型

Normalize.css：

Normalize.css 是一种轻量级的 CSS 框架，专注于保持浏览器一致性。

Reset CSS：

Reset CSS 是一种更为激进的 CSS 框架，专注于消除浏览器默认样式。

应用场景

Normalize.css：

适用于需要保持一些默认样式的项目，如需要保留浏览器默认排版的项目。
适用于需要提高可访问性的项目。

Reset CSS：

适用于需要完全自定义样式的项目，如需要统一所有元素样式的项目。
适用于需要消除浏览器默认样式带来的差异的项目。

遇到的问题及解决方法

问题：为什么使用 Normalize.css 后，某些元素的样式仍然不一致？

原因：

可能是因为 Normalize.css 并没有覆盖所有浏览器的默认样式。
可能是因为某些浏览器有特定的默认样式，Normalize.css 没有处理。

解决方法：

检查 Normalize.css 的版本，确保使用的是最新版本。
如果 Normalize.css 没有覆盖某些样式，可以手动添加相应的 CSS 规则。

问题：为什么使用 Reset CSS 后，某些元素的样式过于简单？

原因：

Reset CSS 将所有元素的样式重置为统一的样式，可能会覆盖一些有用的默认样式。

解决方法：

在 Reset CSS 之后，手动添加需要的默认样式。
使用 Normalize.css 替代 Reset CSS，以保留一些有用的默认样式。

示例代码

Normalize.css：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Normalize.css Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

Reset CSS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reset CSS Example</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>

参考链接

希望这些信息对你有所帮助！

Normalize.css和Reset CSS有什么区别？

我知道CSS Reset是什么，但是最近我听说了一个叫做Normalize.css的新东西正常化CSS和重置CSS有什么区别？

浏览 1409提问于2017-12-19

9回答

Normalize.css和Reset CSS有什么区别？

、

我知道什么是CSS Reset，但是最近我听说了一个叫做Normalize.css的新东西。标准化CSS和重置CSS有什么区别？这只是CSS重置的一个新的流行语吗？

浏览 5提问于2011-07-31得票数 607

回答已采纳

1回答

规范CSS的最佳实践是什么？

、、、

我一直在寻找最好的方式，使我的网站CSS正常化互联网。我读到过：诚挚的问候!

浏览 3提问于2013-09-25得票数 0

回答已采纳

1回答

我正在寻找一个CSS重置文件，用于两年或更短的浏览器，如IE9和更高版本。

、

border: 0; font: inherit;} /* HTML5 display-role reset有没有人有新的、更适合于不到几年的浏览器的东西，例如IE9和更高版本的浏览器？我问这个问题的一个主要原因是，当我尝试使用浏览器开发工具时，当我检查CSS时，我已经厌倦了从我的重置文件中看到很多条目。

浏览 1提问于2013-10-07得票数 1

回答已采纳

2回答

通过CSS删除内容属性周围的边框

、、、

浏览器都会在我的图像周围显示一个精细的边框，这是我通过content设置的：我试着用：border: 0; border-style: none;和text-decoration

浏览 1提问于2016-06-25得票数 0

1回答

CSS Reset+Normalize？

、、

我一直在想，使用normalize.css和某种类型的CSS重置会有什么大问题吗？我一直在四处挖掘，我遇到的所有文章都只是以一种或两种方式谈论它们，但没有提到将两者结合在一起。诚然，我在CSS正常化方面没有多少经验，但在我看来，使用normalize.css从近乎理想的跨浏览器一致性开始，然后添加您的CSS重置选项似乎是非常理想的。谢谢。

浏览 1提问于2013-09-17得票数 1

回答已采纳

1回答

什么时候可以在Normalize.css上使用Reset CSS？

、

在我看来，normalize.css似乎比Reset CSS有更多的优势。我想不出有哪种情况下我会使用Reset CSS而不是normalize.css。有没有人知道使用Reset CSS更合适的原因或用例？

浏览 19提问于2017-06-26得票数 1

2回答

指南针复位实用程序是否覆盖normalize.css和HTML5样板？

、、

所以我用做了一个网站，这是我第一次尝试，我正在尝试使用Susy和Compass，我打算用它。我不熟悉这些工具，很好奇有没有人知道Compass是否提供了HTML5样板(主要是normalize.css)中的任何规则的级联。有人知道吗？

浏览 1提问于2013-05-13得票数 1

回答已采纳

1回答

字体更改android chrome上的css样式

我有一个叫nazanin的阿拉伯字体，它工作得很好，但是当我在android chrome上试用它时，它改变了填充等等。

浏览 40提问于2020-05-20得票数 0

回答已采纳

3回答

使用Twitter Bootstrap重置样式表

、

我的站点是否需要包含reset.css？是否包含在bootstrap.css文件中？

浏览 1提问于2012-03-25得票数 42

回答已采纳

2回答

消除大纲级别上的默认CSS

、

如何消除大纲级别的CSS属性，使它们不会覆盖我放入的div？元素的样式： <h1 class="certTitle">Request History</h1>因为样式有一个框的边框

浏览 0提问于2013-02-16得票数 1

2回答

某些网站不尊重顶部和左侧位置

、、

类似于这里的那个- 我有一个问题，“影子”div不尊重顶部和左在一些网站的位置。我需要为他们中的一些人添加保证金-顶部和保证金-左。为什么会这样呢？

浏览 0提问于2018-05-19得票数 0

回答已采纳

1回答

跨所有浏览器的CSS对齐

、、、、

我遇到了在所有浏览器上对输入文本字段、密码文本字段和登录按钮进行调整的问题。如果它在一个浏览器上工作，那么它就不能在另一个浏览器上工作。附近有工作吗？

浏览 1提问于2012-12-21得票数 1

2回答

CSS SVG类

、、、、

我试图在我的SASS/CSS文件中使用样式。一切都很好，但是我在设置SVG文件的样式方面有问题。 BEM说，应该没有标记或ID选择器，只有类选择器。然而，我想给我的SVG不同的颜色，有时不同的宽度和高度。

浏览 0提问于2019-07-30得票数 1

回答已采纳

1回答

Css引导窗体Rails 3.2

、、、

可能有些Css是与引导相反的。我会将text-field分开(我获得了所有的合并)--这是我的表单的css： <div class="row"> </div> </div>

浏览 3提问于2015-08-25得票数 0

回答已采纳

4回答

不知何故，我无法覆盖normalize.css？

、、

<html lang="en"> <link rel="stylesheet" type="text/css" href="Resources/css/style.css"> <link rel="stylesheet" type="text/css" href="vendors/

浏览 2提问于2019-09-15得票数 0

4回答

是否有必要为引导程序3添加reset.css？

请告诉我，是否有必要在引导3项目中添加reset.css或normalize.css？

浏览 4提问于2013-10-29得票数 29

回答已采纳

1回答

我应该在jquery mobile中使用normalize.css吗？

、

在jquery-mobile的默认主题/css文件中使用normalize.css有什么危害/缺点吗？我的项目的开发人员出于习惯将该文件包含在内，但我认为jquery-mobile已经用其默认样式完成了normalize.css的含义(使浏览器呈现一致声明会不会是多余的，只会增加页面的权重。如果有必要将normalize.css与jquery-mobile样式一起使用，我应该包含normalize还是jquery-mobile？

浏览 2提问于2013-03-13得票数 5

2回答