CSS 重置

我们将重点放在让布局在所有浏览器中保持一致，并通过可扩展的快捷方式加快编码速度。我们已经掌握了编写 HTML 和 CSS 网站所需的基础知识的大部分内容。

在本章中，我们将学习前端开发中的两个重要概念：

• CSS 重置
• Emmet

CSS 重置出现的原因

2000 年代初，曾有一段被称为“浏览器大战”的时期，当时浏览器厂商在网页渲染方面并未遵循统一的标准。尽管大多数厂商都在遵守标准，但仍有不少厂商没有。
因此，同一段 JavaScript 代码在某些浏览器中可能无法正常运行，或产生意外结果。
这导致了各种应对方案的出现，例如浏览器嗅探——检测用户访问的是哪个浏览器，然后仅向该浏览器提供特定的条件性代码。在 CSS 方面，同样面临诸多问题。
最大的问题是：相同的 CSS 代码在不同浏览器中渲染效果完全不同。

通过多年的发展，许多实用的技术和最佳实践逐渐涌现，比如厂商前缀（vendor prefixes），即使在浏览器尚未完全支持某些 property:value 语法时，也能让样式在不同浏览器中表现一致。

开发者对浏览器之间的不一致性感到越来越沮丧。为了解决这个问题，CSS 和 JavaScript 领域开始涌现出各种库。

其中最典型的例子是 jQuery。它的口号是“写得更少，做得更多”。它带来了全新的体验，多年来一直是最受欢迎的 JavaScript 库。

在 CSS 方面，一种解决方案就是使用 CSS 重置。

注意： CSS 重置是一种将不同浏览器的用户代理样式表进行标准化的方法。CSS 重置是一组 CSS 规则，旨在移除或重置浏览器为 HTML 元素提供的默认样式。其目标是为网页样式应用提供一个干净的起点，确保不同浏览器对网页的显示更加一致。

用户代理样式表

许多初级前端开发者并不知道，每个浏览器都有自己的一套样式表。这些样式表就是当网页未应用任何 CSS 时你在屏幕上看到的内容。它们通常被称为 用户代理样式表。

例如，大多数浏览器默认使用的字体是 Times New Roman。与其描述用户代理样式表，不如直接通过实际操作来观察它们的效果。
我们可以通过移除当前网站的所有样式来演示这一点。

移除网页样式

让我们尝试移除网页上的所有样式。

要移除网页的样式，请按以下步骤操作：

1. 如果开发者工具未打开，请按下 "F12" 键或 "Option+Command+I" 键打开。
2. 点击 "Sources" 标签，并确保 "Page" 子标签处于激活状态。
3. 展开网站结构，找到 CSS 文件夹，点击 main.css 文件以在文件预览窗格中打开。
4. 在该窗格内点击，然后使用 "CTRL+A" 或 "Command+A" 快捷键选中文件全部内容。
5. 按下 "DELETE" 键删除所有样式。

目前，主流浏览器的用户代理样式表已经非常接近一致。但它们并非百分之百相同。如今看来，这种差异可能显得有些琐碎。毕竟，每个浏览器都是完全不同的软件，拥有各自的渲染引擎，背后由不同的公司或机构支持。

然而，必须认识到，CSS 重置正是为了解决某个特定历史时期的真实问题而出现的——那时用户代理样式表的不一致性远比现在严重。尽管今天差异已大大减少，但仍存在。如果你正在构建一个要求在不同设备和浏览器上外观完全一致的网站，那么使用 CSS 重置将是一个正确的方向。

常见的 CSS 重置方案

市面上存在多种重置方案，其中一些尤为突出：

• Normalize
• Bootstrap 的 Reboot
• Eric Meyer 的 CSS 重置

是否应该使用 CSS 重置？
是的，大多数情况下使用最流行的几种方案即可。