CSS Reset：对哪些样式进行重置-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，不同浏览器对于 HTML 元素的默认样式可能存在差异，这给开发者带来了很大的麻烦。为了避免这种问题的出现，我们可以使用 CSS Reset 对不同浏览器的默认样式进行重置，从而使得我们的页面在不同浏览器下呈现出一致的效果。

为什么需要 CSS Reset

在前端开发中，浏览器对于 HTML 元素的默认样式是不一致的，这可能会导致一些样式在不同浏览器下呈现出不同的效果。比如，在 Chrome 中，<p> 元素的默认样式是有一定的上下间距的，而在 Firefox 中则没有。这种差异会给我们的开发带来很大的困扰。

为了解决这个问题，我们可以使用 CSS Reset 对不同浏览器的默认样式进行重置，从而使得我们的页面在不同浏览器下呈现出一致的效果。CSS Reset 是一种 CSS 文件，它会将 HTML 元素的默认样式全部重置为相同的值，从而使得我们可以自由地定义样式而不用担心浏览器的差异。

CSS Reset 的实现

CSS Reset 的实现方式有很多种，其中比较常见的有 Normalize.css 和 Reset.css。

Normalize.css

Normalize.css 是一种流行的 CSS Reset 文件，它的目标是使得所有浏览器的默认样式尽可能一致，同时保留一些有用的默认样式，比如表单元素的一些样式。Normalize.css 不会像 Reset.css 一样将所有元素的样式都重置为相同的值，而是会根据浏览器的差异来设置一些通用的样式，从而使得所有浏览器下的页面都呈现出一致的效果。

Reset.css

Reset.css 是一种比较传统的 CSS Reset 文件，它的目标是将所有 HTML 元素的默认样式都重置为相同的值，从而避免不同浏览器的差异。Reset.css 会将所有元素的样式都设置为相同的值，比如将所有元素的 margin 和 padding 都设置为 0，从而使得我们可以自由地定义样式而不用担心浏览器的差异。

选择使用哪种 CSS Reset

在选择使用哪种 CSS Reset 时，我们需要考虑自己的需求和项目的特点。如果我们希望页面在不同浏览器下呈现出一致的效果，并且希望保留一些有用的默认样式，那么可以选择使用 Normalize.css。如果我们希望将所有 HTML 元素的默认样式都重置为相同的值，从而避免不同浏览器的差异，那么可以选择使用 Reset.css。

CSS Reset 的示例代码

下面是一个使用 Reset.css 的示例代码：

// 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, 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;
}

上面的代码会将所有 HTML 元素的默认样式都重置为相同的值，从而避免不同浏览器的差异。我们可以将这段代码保存为 Reset.css 文件，然后在 HTML 文件中引入即可。

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

CSS Reset：对哪些样式进行重置