在开发网页时，不同的浏览器对于元素的默认样式不尽相同，这会给开发带来不小的麻烦。CSS Reset 就是一种解决这个问题的方法，它会清除浏览器默认样式并重新定义样式，使得元素在不同的浏览器中的样式表现一致。本文将介绍什么时候应该使用 CSS Reset，并详细讲解其使用方法。
为什么需要 CSS Reset？
浏览器默认样式的不同，会导致网页在不同的浏览器中呈现效果不同，这对于网页开发而言是不利的。比如，IE 中有一个 IE6 的 bug，会导致默认情况下的图片插入到 a 标签内部时出现样式问题。此外，浏览器的默认样式不但不统一，而且有些样式也十分不美观。如果需要让网页呈现一致的质量，则需要重置这些样式。
使用 CSS Reset 的方法
CSS Reset 有两种形式：传统的和基于 normalize.css 的。在这里我们介绍传统的 CSS Reset，这是一种通用的方法。
传统的 CSS Reset 的实现方法非常简单，只需要在你的 CSS 文件中加入下面的代码即可：
-- -------------------- ---- ------- ----- ----- ---- ----- ------- ------- ------- --- --- --- --- --- --- -- ----------- ---- -- ----- -------- -------- ---- ----- ----- ---- ---- --- ---- ---- ---- -- -- ----- ------ ------- ------- ---- ---- --- ---- -- -- -- ------- --- --- --- --- --- --- --------- ----- ------ ------- ------ -------- ------ ------ ------ --- --- --- -------- ------ ------- -------- ------ ------- ----------- ------- ------- ------- ----- ---- ------- ----- -------- -------- ----- ----- ------ ----- - ------- -- -------- -- ------- -- ---------- ----- ----- -------- --------------- --------- - -- ----- ------------ ----- --- ----- -------- -- -------- ------ -------- ----------- ------- ------- ------- ------- ----- ---- ------- - -------- ------ - ---- - ------------ -- - --- -- - ----------- ----- - ----------- - - ------- ----- - ------------------ ----------------- --------- ------- - -------- --- -------- ----- - ----- - ---------------- --------- --------------- -- -
这段代码会将上文提到的所有元素的默认样式清空，使样式表现在各个浏览器中一致。此外，该代码还增加了一些缺失的样式，规定了 HTML5 一些标签的样式。
注意事项
当您想精细设置某些元素的样式时，CSS Reset 将会被覆盖，为了得到更好的效果，您需要特别注意。
当您与其他开发人员协作时，意见统一通常比个人意见更优先。如果您的团队没有固定的 CSS Reset，那么 Bootstrap，Materialize 等框架将提供您一个网络标准 Reset。
结论
对于开发者而言，CSS Reset 是一种通用性较强的方法，能够解决在不同浏览器中的样式表现不一致的问题。但是，当样式有所差异或者与其他开发人员的协作时，我们应当特别注意使用的最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676df81b82fcee791c6b2009