在前端开发过程中，CSS Reset 是必不可少的一步。通过 CSS Reset，可以清除默认样式，保证页面在不同浏览器之间的表现一致，也能减少浏览器差异性带来的不必要的麻烦。本文将介绍一种完美 CSS Reset 方案，让你的页面更稳定，更易于开发和维护。
为什么需要 CSS Reset
CSS Reset 的原因在于各个浏览器对 HTML 元素的默认样式存在差异，这会导致同样的 HTML 页面在不同的浏览器上展现出来会有不一样的效果。比如一个新建的 div 元素，在 Chrome 和 Firefox 上的默认边距和行高就不一样，因此需要使用 CSS Reset 来清除默认样式，使这个页面在不同的浏览器上表现一致。
CSS Reset 有哪些方案
目前比较常用的 CSS Reset 方案有 normalize.css 和 reset.css。
reset.css 是由 Eric Meyer 编写的，它通过重置每个 HTML 元素的属性来清除默认样式，达到一致的效果。但是，reset.css 其实做得有点过了。它将所有的样式都清空了，导致后续开发时需要重新写大量代码。比如，清空了表格的样式，在需要制作表格时就需要重新写一大堆样式。
normalize.css 是另外一种常用的 CSS Reset 方案，相对于 reset.css 来说，normalize.css 可以说是更加温和一些。它会保留部分有用的默认样式，如一些标签的部分样式，使页面清除默认样式后依然保持通用的样式特性。
在上述的两种 CSS Reset 方案中，我们可以看到各自的特点和缺点，那么有没有一种完美的 CSS Reset 方案呢？本文提供的 CSS Reset 方案可以说是比较接近完美了。
首先，让我们来看一下 CSS Reset 的代码：
-- -------------------- ---- ------- -- ----- -- - - ------- -- -------- -- ------- -- ----------- ----------- ---------- ----- ------------ ------- ------------ ---- ------ -------- ----------- ----- - -- ---------- -- ---- - ------------ -------------- ------------------- ------ ---- ------- ------- ------- ---------- ---------- ------ ----------- ---------- ----- ------------ ------- ------------ ---- ------ ----- - -- ----- -- - - ---------------- ----- ------ -------- - -- ----- -- --- -- - ----------- ----- -
这是一个完美的 CSS Reset。它既清除了默认样式，也保留了一些默认样式中有用的部分。下面分别介绍 CSS Reset 的每个部分。
Reset
在 Reset 部分，我们清除了所有 HTML 元素的默认样式，并设置了 box-sizing: border-box，这是前端开发中非常有用的一个功能，在这里我们不再赘述。
对于字体相关的属性，我们将 font-size 设置为 16px，line-height 设置为 1.5，这是比较通用的字体大小和行高设置。而字体的 font-family 采用了苹果系统字体、Windows 系统字体和常见的 sans-serif 等字体，确保了不同操作系统下都有较高的兼容性。
最后，我们将 color 和 text-align 采用了 inherit，这是为了保持通用的颜色和文字排版特性。
Typography
在 Typography 部分，我们将 body 元素的字体样式设置为了一个比较通用的样式特性。font-family 和 Reset 中采用的一样，但这里 font-size 设置为了 1rem，这是在 CSS 中相对字体大小的一个设置，这样方便了在后续的开发中进行字体调整。
Links
在 Links 部分，我们清除了超链接的下划线，并将其颜色设置为了 inherit，这是为了保持通用的文字颜色特性。
Lists
在 Lists 部分，我们清除了列表的默认样式，并将样式设置为了 none。这样，后续在开发过程中可以根据需要自行添加样式，而不会受到默认样式的影响。
总结
以上便是完美的 CSS Reset 方案了。相对于其他 Reset 方案，这里既保留了部分有用的默认样式，又能保证页面的清洁和稳定性。在实际开发中，建议在这个 CSS Reset 的基础上进行后续开发，使开发更加顺畅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647aecf9968c7c53b068706b