什么是 CSS Reset
CSS Reset 是用来重置 HTML 元素的默认样式的 CSS 库。它的作用是将浏览器不同的默认样式统一到一种样式下，避免浏览器的差异导致的样式问题。
通常我们在开始一个新的项目时，会先引入一个 CSS Reset 库，比如 normalize.css 或者 reset.css。
CSS Reset 引起的异样表现
CSS Reset 虽然可以避免浏览器的默认样式导致的样式问题，但是它也可能引起一些意外的问题。下面是一些常见的异样表现：
字体大小不一致
由于 CSS Reset 会将所有的字体大小都设为相同的值，因此在应用了 CSS Reset 的情况下，不同的元素可能会看起来大小不一。
元素间距变大
CSS Reset 会去掉元素的 margin 和 padding，导致相邻的元素之间的距离变得更大。
布局失效
CSS Reset 会将所有的元素大小都设为默认值，导致一些布局相关的样式失效。
其他
CSS Reset 还可能引起很多其他的问题，比如表单元素的样式、图片的边框等等。
解决办法
虽然 CSS Reset 可能会引起一些意外的问题，但是我们依然可以通过一些方法来避免这些问题。下面是一些解决办法：
引入 normalize.css
normalize.css 是一个比较好的 CSS Reset 库，它可以保留一些有用的默认样式，同时避免了一些问题。
使用框架
框架比如 Bootstrap、Material Design Lite 等都会自带一种 reset 的样式，它们会保留一些有用的默认样式，同时也可以保证浏览器的兼容性。
精细化样式覆盖
在开发时，我们可以通过对单个元素的样式进行精细化覆盖来避免 CSS Reset 的问题。利用 CSS 选择器的优先级，我们可以对指定的元素进行样式的覆盖，从而避免全局的样式问题。
自定义 CSS Reset
在实际开发中，我们也可以自己编写一份定制化的 CSS Reset，根据项目的需要来针对性地重置一些样式，保持浏览器的兼容性同时避免不必要的问题。
示例代码
下面是一份非常简单的自定义 CSS Reset：
-- -------------------- ---- ------- -- ---------- ---------- -- -- ---------- -------- - ----------- ----------- - -- --------- --- ------- --- -------- -- -- -------- -------- - ------- -- -------- -- - -- ------ --- ---- ------ --------- --------- ----- -- --- -- - ----------- ----- - -- ------ --------- ---- ----- -- - - ---------------- ----- - -- ------ ------- ---- ----- -- ------ - -------- -- -
结论
在 Web 前端开发中，CSS Reset 是一个必不可少的工具。虽然它可能引起一些问题，但是我们可以通过引入一些更加完善的 CSS Reset 库、使用框架、精细化样式覆盖或者自定义 CSS Reset 等方式来避免这些问题。在实际开发中，我们需要不断地学习和探索，以便更好地应对各种问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67763bf06d66e0f9aa163e9c