在开发前端页面的过程中，我们经常会遇到默认样式（Default Styles）和 CSS Reset 的冲突。默认样式是指浏览器对 HTML 标签默认设定的样式。CSS Reset 是一种清除浏览器默认样式并统一样式的方法。在这篇文章中，我们将探索这两种样式的差异，以及如何解决它们之间的冲突。
默认样式
HTML 标签都有默认样式，这些样式是为了确保页面在缺少样式的情况下具有可读性和可用性。比如 <h1> 标签具有加粗加大的特点，<p> 标签具有一定的上下边距和行高等等。这些默认样式是由浏览器自带的样式表定义的。不同浏览器的默认样式可能有所差异，却有着很强的共性。
默认样式的优点在于，它们可以提供一定的样式基础，避免需要为每一个标签都手动设定样式，同时提高了页面的可读性和可用性。
CSS Reset
CSS Reset 是一种清除浏览器默认样式的方法。它的思路是将每一个标签的默认样式都设为相同的值。通过这种方法，我们可以统一各种浏览器之间的差异，确保我们可以在任何浏览器上获得一致的页面样式。
一个常用的 CSS Reset 样式表是 Normalize.css，它用于修复许多常见的浏览器不一致性，同时尽量保留有用的默认值和特性。由于不同的 CSS Reset 样式表有不同的优缺点，开发人员需要选择最适合他们开发需求的样式表。
冲突解决
在使用 CSS Reset 的过程中，我们需要注意到默认样式和 CSS Reset 的冲突同时给我们带来了诸多问题。
一些根据默认样式样式的 HTML 元素可能会与 CSS Reset 规则冲突，从而导致页面样式不符合预期。另外，我们可能需要选择部分而非全部标签进行样式重置。这就需要我们需要根据实际需求编写样式定义。
以下是一些解决默认样式和 CSS Reset 冲突的技巧：
1. 使用框架或库
大多数框架和库都提供了自己的 CSS Reset 方法，我们可以直接使用这些方法来避免默认样式和 CSS Reset 的冲突。比如 Bootstrap 中的 Reboot。
2. 手动重置样式
我们可以根据需要手动去掉某些默认样式，再进行 CSS Reset。这样就可以在保留一些默认样式的同时，避免样式冲突问题。
比如 <button> 标签的默认样式可能会与部分 CSS Reset 产生冲突，我们可以将它们单独去除。示例代码如下：
// javascriptcn.com code example
button {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
background: transparent;
/* inherit font & color from ancestor */
color: inherit;
font: inherit;
/* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
line-height: normal;
/* Corrects font smoothing for webkit */
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
/* Correct cursor style */
cursor: pointer;
}为了避免出现样式冲突，我们可以先去除 <button> 标签中的默认样式，再进行 CSS Reset。
3. 逐个选择规则
另一个选择权利就是逐个选择规则。我们可以根据自己的需求，选择保留哪些默认样式，哪些应该被重置。这也是一种优化 CSS Reset 的方法。
结论
默认样式和 CSS Reset 都是在前端开发中必须掌握的技巧。了解它们之间的冲突，能够很好的做出正确的选择，从而获得更好的开发效果。同时，我们应该不断地学习和探索新的技巧和方法，以便让我们的页面更加美观和实用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67397d7c317fbffedf1704b9