在进行前端开发时，我们需要使用 CSS 来控制页面的样式。但是，不同浏览器对默认的 CSS 样式有不同的实现，导致同一份代码在不同浏览器下展示的效果会有所不同。为了解决这个问题，我们需要使用一个 CSS Reset 。
什么是 CSS Reset
CSS Reset 是一种技巧，旨在通过一套样式规则，将浏览器默认的样式恢复到统一的状态。这就使得我们可以在不同浏览器下，使用相同的规则来控制各个元素的样式，从而保证页面的视觉一致性和可靠性。
为什么需要 CSS Reset
为什么需要 CSS Reset 呢？因为不同的浏览器在渲染页面时，会有各自的默认样式。例如，body 元素在不同浏览器下默认的 margin 和 padding 是不尽相同的。这种差异会导致同一份代码在不同浏览器下呈现出来的样式不一致，从而影响页面的视觉效果。
使用 CSS Reset 可以统一各个元素的默认样式，从而使得我们能够更好地掌控页面的样式，减少浏览器的默认干扰，进而达到更好的视觉效果、更好的用户体验。
如何使用 CSS Reset
使用 CSS Reset 很简单，只需要在我们的样式表中加入一些通用的样式规则即可。下面介绍两种常见的 CSS Reset 方法：
1. 手写 CSS Reset
手写 CSS Reset 的原理是将所有元素的默认样式都设为一致。比如：
-- -------------------- ---- ------- -- ----------- -- - - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- -
这段代码中，通配符 * 表示所有元素，将它们的 margin、padding、border、font-size、font 和 vertical-align 重置为零。
需要注意的是，手写 CSS Reset 的代码量比较大，如果项目中有很多页面且需要支持多个浏览器，就需要写多个 Reset。比较繁琐且容易出错。
2. 引用外部 CSS Reset 库
除了手写外部 Reset，还可以引用外部 Reset 库，如 Normalize.css 和 reset.css 。这两个库通过建立一套规范的样式文件，定义了所有元素的默认样式，并在所有浏览器下适用。
以 Normalize.css 为例：
<!-- 在 head 标签中引用 Reset --> <head> <link rel="stylesheet" type="text/css" href="normalize.css"> </head>
下载 Normalize.css 后，在页面中引用即可。在调用 Normalize.css 后，所有元素的默认样式都变成了规定好的样式，这样我们就可以在统一的基础上进行开发了。
注意事项
确认是否需要使用 Reset。使用 Reset 可以解决跨浏览器样式不一致的问题，但也可能会对设计带来一些限制，所以需要根据实际情况决定是否要使用 Reset。
选择适合的 Reset 库。需要根据实际项目需求选择合适的 Reset 库，这里有很多好的 Reset 库可供选择。
部分元素需要重置样式。有些元素对于页面的布局和样式会有影响，比如表格、列表等，需要特别注意。
结论
尽管浏览器的兼容性越来越好，但在进行前端开发时，我们仍需要考虑浏览器之间的差异。使用 CSS Reset 可以有效地解决跨浏览器样式不一致的问题，并提高页面的可靠性和一致性。需要注意的是，选择合适的 Reset 库、重置部分元素的样式等，都需要综合考虑，以确保在实际开发过程中使用得当。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67175bcfad1e889fe221309b