在前端开发中，我们经常会使用一些外部库或框架，如 Bootstrap、Semantic UI 等，它们提供了很多方便的样式和组件，可以大大减少我们的开发时间。但是，这些库的样式往往会与我们自己的样式发生冲突，导致页面显示不正常。为了解决这个问题，我们可以使用 CSS Reset。
什么是 CSS Reset
CSS Reset 是一种在网页加载时自动重置所有元素的默认样式的方法。这样，我们就可以在自己的样式表中重新定义元素的样式，从而避免与外部库的样式冲突。
如何使用 CSS Reset
使用 CSS Reset 很简单，我们只需要在页面加载之前引入一个 CSS Reset 的样式表即可。目前，有很多 CSS Reset 的样式表可供选择，如 Eric Meyer 的 Reset CSS、Normalize.css 等。
以下是一个使用 Normalize.css 的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ------------- ----------- ----- ---------------- -------------------------------------------------------------------------------- ------- -- ---------- -- -------- ------- ------ ---- --------- --- ------- -------展开代码
在上面的示例中，我们在 head 标签中引入了 Normalize.css，然后在 style 标签中编写自己的样式。
Normalize.css 的特点
Normalize.css 是一种比较流行的 CSS Reset 样式表，它有以下特点：
- 保留了有用的默认样式，如表格的样式、文本的样式等。
- 修复了一些浏览器的 bug，如在 IE 中，img 元素会有一个默认的 border 样式，Normalize.css 就将其设置为 0。
- 提供了一些额外的样式，如清除浮动的类 clearfix。
总结
CSS Reset 是一种解决外部库与自身样式冲突的好方法。我们可以选择自己喜欢的 CSS Reset 样式表，如 Normalize.css，然后在页面加载之前引入它，就可以避免样式冲突了。在编写自己的样式时，我们只需要重新定义元素的样式即可。
希望这篇文章能够帮助你更好地理解 CSS Reset，并解决样式冲突的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516382f95b1f8cacde8c1dc
