什么是 CSS Reset
在开始讲解如何实现真正的 CSS Reset之前，我们首先要了解什么是 CSS Reset。
CSS Reset是指一系列的CSS代码，通过重置文档中所有的HTML元素样式，以保证在不同的浏览器中都能得到一致的显示效果。其目的是为了解决不同浏览器之间的兼容性问题，使得网页的展示更加稳定和一致。
常见的 CSS Reset 方法
在实际的开发中，我们常常会使用CSS Reset 去除浏览器的默认样式，并按照我们自己的需求去设置元素的样式。这样做的好处是，能够避免在各个浏览器之间出现样式不一致、显示效果不佳等问题。
以下是几种常见的 CSS Reset 方法：
normalize.css
normalize.css 是目前最为流行的 CSS Reset 库之一，它能够解决一些浏览器样式的一致性问题，并且不会对你的样式造成太大的干扰。它重置了一些元素的默认样式，保证不同浏览器之间的显示效果统一。
Eric Meyer’s reset.css
Eric Meyer’s reset.css 是一个比较古老的 CSS Reset 库，它是第一个流行的 CSS Reset 方案，也是最为彻底的一种方案。它将所有的HTML元素的Margin, Padding, Border 都设置为 0，并强制所有元素的FontSize为 1em。虽然这种方案能够清除掉大部分默认值，但是它也可能造成其他问题。
自定义 CSS Reset
自定义 CSS Reset 是根据自己的需求，定义一些CSS代码，达到清除浏览器默认样式的效果。这种方式需要考虑到各种浏览器之间的兼容性，而且需要自己手动去定义样式。
由于现代化的浏览器对 HTML 元素的样式已经有了默认的设置，所以一个真正的 CSS Reset 应该只清空不需要的样式，而保留那些有用的样式，以确保网站的可访问性和易于维护。
以下是一个我们认为比较全面、实用的 CSS Reset 代码：
-- -------------------- ---- ------- -- ----------- -- ----- ----- -- --- --- --- --- --- --- ----------- ------- --------- ------- --------- ---- ------- --- --- --- --- --- --- --- ------- ----- ------ -------- ------ ------ ------ --- --- -- - -------- -- --------- -- - ---- - ------------ ----------- ------------- ---------- ------ ---------- ------ ----------- - ---- - ----------- ----- ------------- ---- ------- ----- ------------------ ----- - -------- ------ -------- ----------- ------- ------- ------- ------- ----- ----- ---- -------- ------- - --------- ------ - --- -- - ------------ ----- - ----------- - - -------- ----- - ------------------ ----------------- --------- ------- - --------- --- --------- ----- - ----- - ----------------- --------- ---------------- -- - --- - ----------- ----- -展开代码
注释掉了一些不必要的样式，比如间距、列表样式等。同时定义了一些常用的样式，比如HTML元素的fontSize、line-height、颜色等。
在实际的开发中，我们也可以根据自己的需求进行定制，比如去掉所有的margin、padding、border等属性，或者进行特定元素的样式设置等。
结语
一个好的 CSS Reset 库可以保证你的Web页面在不同浏览器中、不同操作系统中的展示效果一致。我们需要了解一些常见的 CSS Reset 方法，并选择适合自己的方案。同时，在实现 CSS Reset 的时候，需要考虑兼容性和样式的易用性，避免样式混乱、不可维护等问题的发生。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b69747306f20b3a62a5ed9
