初学者必看：CSS Reset 的正确使用方法-JavaScript中文网-JavaScript教程资源分享门户

什么是 CSS Reset？

在编写样式时，我们经常会发现不同的浏览器会给元素默认加上不同的样式，这会导致在不同浏览器下呈现的效果不一致。而 CSS Reset 就是为了解决这个问题而生的。

CSS Reset 是一种标准化浏览器样式的方法，它通过重置所有元素的默认样式来避免不必要的差异。这样我们就可以在开始编写样式时，不用考虑浏览器的默认样式而直接从零开始构建。

CSS Reset 的正确使用方法

在使用 CSS Reset 时，我们不应该简单地将其添加到项目中，而应该根据具体情况进行选择和定制。

选择需要的 CSS Reset

网上已经有很多成熟的 CSS Reset 供我们选择，比如 Eric Meyer 的 Reset CSS 和 Normalize.css 等。不同的 CSS Reset 有其不同的适用场景，我们应该选择最适合我们的 Reset。

另外，有一种叫做 “Undo HTML5 Boilerplate” 的 Reset，它仅仅重置了一些常用且可能会影响跨浏览器的样式属性，非常实用，推荐使用。

定制个性化的 CSS Reset

有时候，我们不需要彻底地重置所有元素的样式，可能只需要重置某些特定元素的样式，或者保留一些默认样式。

这时，我们可以根据自己的需求，定制个性化的 CSS Reset。比如，我们可以只重置一些常见的样式属性，如 margin 和 padding 等，而保留其他默认样式。

新增自己的样式

在应用了 CSS Reset 后，我们也可以新增自己的样式。但我们需要注意，要遵循良好的样式规范，避免操作冲突或不必要的样式。

示例代码

使用 “Undo HTML5 Boilerplate” Reset：

// javascriptcn.com 代码示例
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: inherit;
}

ul,
ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

自定义 CSS Reset：

// javascriptcn.com 代码示例
/* 全局重置 */
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
strong,
img,
ul,
ol,
li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
}

/* 针对某些特定元素的自定义 */
h1 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: bold;
}

a {
  color: #1155cc;
  text-decoration: underline;
}

button,
input[type="submit"] {
  border: 1px solid #1155cc;
  background-color: #1155cc;
  color: #fff;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 3px;
}

/* 针对某些元素保留默认样式 */
img {
  vertical-align: middle;
}

总结

CSS Reset 可以有效地解决不同浏览器之间的样式差异，但我们需要慎重选择并定制个性化的 CSS Reset。在样式编写时，我们还需要考虑到样式规范和操作冲突的问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/651c028695b1f8cacd397a00