什么是 CSS Reset？
在编写样式时，我们经常会发现不同的浏览器会给元素默认加上不同的样式，这会导致在不同浏览器下呈现的效果不一致。而 CSS Reset 就是为了解决这个问题而生的。
CSS Reset 是一种标准化浏览器样式的方法，它通过重置所有元素的默认样式来避免不必要的差异。这样我们就可以在开始编写样式时，不用考虑浏览器的默认样式而直接从零开始构建。
CSS Reset 的正确使用方法
在使用 CSS Reset 时，我们不应该简单地将其添加到项目中，而应该根据具体情况进行选择和定制。
选择需要的 CSS Reset
网上已经有很多成熟的 CSS Reset 供我们选择，比如 Eric Meyer 的 Reset CSS 和 Normalize.css 等。不同的 CSS Reset 有其不同的适用场景，我们应该选择最适合我们的 Reset。
另外，有一种叫做 “Undo HTML5 Boilerplate” 的 Reset，它仅仅重置了一些常用且可能会影响跨浏览器的样式属性，非常实用，推荐使用。
定制个性化的 CSS Reset
有时候，我们不需要彻底地重置所有元素的样式，可能只需要重置某些特定元素的样式，或者保留一些默认样式。
这时，我们可以根据自己的需求，定制个性化的 CSS Reset。比如，我们可以只重置一些常见的样式属性，如 margin 和 padding 等，而保留其他默认样式。
新增自己的样式
在应用了 CSS Reset 后，我们也可以新增自己的样式。但我们需要注意，要遵循良好的样式规范，避免操作冲突或不必要的样式。
示例代码
使用 “Undo HTML5 Boilerplate” Reset：
---- - ----------- ----------- - -- ---------- -------- - ----------- ----------- - ---- - ----------------- ----- ------ ----- ------------ ------ ----------- ---------- ----- ------------ ---- - - - ------ -------- ---------------- ----- - --- - -------- ------ ------ ----- ------- ----- - --- --- --- --- --- -- - ---------- ----- ------------ -------- - --- -- - -------- -- ------- -- ----------- ----- -
自定义 CSS Reset：
-- ---- -- ----- ----- ---- ----- --- --- --- --- --- --- -- -- ------- ---- --- --- -- - ------- -- -------- -- ------- -- ---------- ----- ------------ ------- - -- ------------ -- -- - ---------- ----- ------------ ---- ------------ ----- - - - ------ -------- ---------------- ---------- - ------- -------------------- - ------- --- ----- -------- ----------------- -------- ------ ----- ---------- ----- -------- --- ----- -------------- ---- - -- ------------ -- --- - --------------- ------- -
总结
CSS Reset 可以有效地解决不同浏览器之间的样式差异，但我们需要慎重选择并定制个性化的 CSS Reset。在样式编写时，我们还需要考虑到样式规范和操作冲突的问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/651c028695b1f8cacd397a00