什么是CSS Reset和Normalize.css
在了解两种方案的优劣前，我们先来了解一下CSS Reset和Normalize.css。
CSS Reset是一种CSS代码片段，它的目的是尽可能归零浏览器的默认样式，并为所有HTMLelement提供相同的基础样式。一般来说，CSS Reset包含了一系列选择器和属性，用于删除HTML元素的所有内置样式。
Normalize.css则是一种CSS库，用于标准化不同浏览器之间的样式差异。它的目标是在保持有用的默认样式的同时，解决浏览器之间的样式差异并修复常见的bug。
两种方案的优劣比较
CSS Reset的优势
- 归零浏览器的默认样式，避免兼容性问题。有些浏览器的默认样式不兼容或难以跨浏览器保持一致，使用CSS Reset能够消除这些兼容性问题。
- 提供更好的可定制性。CSS Reset会为HTML元素提供基础样式，使得我们可以更方便地为各个元素自定义样式。
Normalize.css的优势
- 修复浏览器之间的样式差异。不同浏览器之间的样式差异是常见的问题，在没有样式标准化方案的情况下，这些差异会导致样式不一致，影响用户体验。Normalize.css的目的就是用一套标准的样式修复这些差异，使得样式在各个浏览器下一致。
- 保持有用的默认样式。在某些情况下，浏览器的默认样式是有用的，使用CSS Reset会把这些默认样式归零，而Normalize.css会保留这些有用的默认样式。这使得网站或应用程序在不同浏览器上的外观更加一致，同时保持一定程度的可定制性。
如何选择CSS Reset和Normalize.css
- 如果你需要完全控制样式，并且需要从头开始创建定制的UI，那么CSS Reset是更好的选择。
- 如果你需要快速修复不同浏览器之间的样式差异，并且希望保持一些有用的默认样式，那么Normalize.css是更好的选择。
Normalize.css的实际应用
Normalize.css是一个成熟的库，在许多应用程序和框架（如Bootstrap）中都得到应用。接下来，我们将介绍如何在实际项目中使用Normalize.css。
下载和引入Normalize.css
首先，你需要从Normalize.css的官方网站（https://necolas.github.io/normalize.css/）下载Normalize.css的最新版本。
下载完成后，将Normalize.css文件保存到项目的CSS目录中。
在HTML文档中引入Normalize.css，可以使用link元素添加：
<link rel="stylesheet" type="text/css" href="CSS/normalize.css">
定制化使用Normalize.css
默认情况下，Normalize.css会修复所有浏览器的差异，包括元素的外观、字体、表格等。但是，在某些情况下，我们需要在标准化之上应用自定义样式。
在应用自定义样式之前，建议在样式表的开始处添加以下代码：
-- -------------------- ---- ------- -- ------------------ ---- - ----------- ----------- ------------ ------ ---- ---------- ------ ----------- ------ ---------- ----- ------------ ---- - -- ---------- -------- - ----------- -------- -
在这段代码中，我们使用了box-sizing:border-box使得元素的宽高在计算时不会被padding撑开。我们还将字体设置为"Segoe UI", "Helvetica Neue", Sans-serif，这些字体在不同操作系统和设备上都具有较好的兼容性。我们还将line-height设置为1.4，这是一个增加可读性的推荐值。
在这段代码后，我们可以添加自定义样式。因为我们使用了Normalize.css，我们可以放心地应用标准的CSS样式，而不用担心浏览器之间的差异。
-- -------------------- ---- ------- -- -------------- -- -------- - -------- ----- ------- --- ----- ----- ----------------- -------- - ---- - -------- ------------- ---------- ----- ------------ ----- --------------- ---------- -------- ---- ----- ------- --- ----- ----- ------ ----- ----------------- ----- -
在这段代码中，我们应用了自定义样式到.section和.btn元素中，而这些元素在不同浏览器中都会表现一致。
结论
CSS Reset和Normalize.css都是优秀的标准化方案，用于解决不同浏览器之间的样式差异。具体哪种方案使用取决于你的需求，如果你需要完全控制样式，并从头开始创建定制UI，那么CSS Reset是更好的选择。如果你需要快速修复浏览器差异，并保持一定程度的可定制性，那么Normalize.css是更好的选择。
在使用Normalize.css时，我们建议在应用自定义样式之前，加入一些CSS代码以重置所有内置样式。这些代码可以帮助我们更好地控制样式，同时也使得自定义样式更加易于编辑和修改。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d81e6d773cf2d54cfac41