CSS Reset 的正确使用姿势，避免样式冲突-JavaScript中文网-JavaScript教程资源分享门户

当我们在编写前端网页时，往往需要使用各种 CSS 样式表来实现我们想要的效果。不过，当我们同时引入多个样式表时，很可能会出现样式冲突的问题，导致网页样式出现混乱。为了解决这个问题，我们可以使用 CSS Reset，来规定网页中所有元素的默认样式，并保持一致性。

什么是 CSS Reset

CSS Reset 是一种 CSS 样式表。其主要作用是将浏览器的默认样式设置为一致的，以便我们可以以我们自己的方式定义网页样式，而不必考虑浏览器的默认样式所带来的影响。

需要注意的是，CSS Reset 并不是为了解决样式冲突问题而生的。它是一个归一化的样式表，通过强制浏览器使用一致的的默认值来帮助我们更方便地对网页进行全局样式定义。

CSS Reset 的正确使用姿势

不要过度使用

尽管 CSS Reset 很有用，但是你应该小心，不要过度使用它。如果你在一个大型项目中使用它，可能会影响整个项目的样式。为了避免这种情况，你应该仅在需要时使用 CSS Reset，并且应该仔细选择适合你项目的 Reset 尺寸。

选择正确的 Reset 尺寸

选择正确的 Reset 尺寸非常重要。不同的尺寸可能会影响你项目的样式。例如，在一个固定布局的网站上使用了 Normalize.css，所以你需要在你项目中使用其他 Reset，旨在还原浏览器的默认样式。使用错误的 Reset 尺寸可能会导致样式冲突等问题。

在样式文件中正确引入 Reset

在引用 CSS Reset 时，应该注意以下几点：

Reset 应该在你的样式表之前被引入，这样在样式表中的样式表达式将无需覆盖默认值。
当你引入 Reset 时，你应该知道它会覆盖浏览器默认样式，并改变浏览器的表现方式，让它们更符合你的网站主题。
如果你使用包含 Reset 的 CSS 框架如 Bootstrap，你应该小心地选择你需要的部分，并确保不会与你的自己的样式产生冲突。

CSS Reset 示例代码

下面是一个基本的 CSS Reset 的示例代码：

// www.javascriptcn.com code example
/* reset.css */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* End of file */

最后的思考

CSS Reset 能够解决许多样式冲突问题，但它并不是完美的。它有时可能会改变浏览器和其他框架的默认行为，带来其他的问题。因此，在使用 CSS Reset 时，你应该谨慎考虑，并根据自己的项目需求选择适合的 Reset 尺寸和使用方式。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d4f9a0a941bf713493c1a1

CSS Reset 的正确使用姿势，避免样式冲突