写给初学者的 CSS Reset 常见问题-JavaScript中文网-JavaScript教程资源分享门户

什么是 CSS Reset？

CSS Reset 是一种用于重置 CSS 样式的方法。它可以覆盖浏览器的默认样式，以便更好地控制网页的样式。使用 CSS Reset 可以保证各个浏览器渲染页面时的一致性，从而更好地实现跨浏览器的兼容。CSS Reset 的实现方法可以是手动编写 CSS 样式表，也可以使用现成的 CSS Reset 库。

为什么需要 CSS Reset？

每个浏览器都有自己的默认样式，不同浏览器的默认样式也不同。这会导致在不同浏览器上呈现的页面有很大差异，可能会造成网页开发者无法准确控制页面的外观和布局。CSS Reset 可以重置各个浏览器的默认样式，使得我们能够更好地控制页面的样式。同时，CSS Reset 可以保证在不同浏览器上呈现的页面更加一致。

常见的 CSS Reset 库

Eric Meyer's Reset CSS

Eric Meyer's Reset CSS 是最经典的重置 CSS 库之一。它通过重置元素的样式来消除默认样式规则的不一致，使样式更加统一。以下是 Eric Meyer's Reset CSS 的示例代码：

// javascriptcn.com 代码示例
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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

Normalize.css

Normalize.css 是另一个广泛使用的 CSS Reset 库。它不同于 Eric Meyer's Reset CSS，它会保留浏览器的一些默认行为（如排版一致性、默认字体大小等），而不是完全重置样式。以下是 Normalize.css 的示例代码：

// javascriptcn.com 代码示例
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

main {
    display: block;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

a {
    background-color: transparent;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

b,
strong {
    font-weight: bolder;
}

code,
kbd,
samp,
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
}

常见问题及解决

1. 为什么我的页面重置后，样式看起来变得很奇怪？

CSS Reset 是会改变浏览器的默认样式，所以这样的情况是很常见的。如果你使用的是 Eric Meyer's Reset CSS，你可以自己编写 CSS 样式表来更改默认值。如果你使用的是 Normalize.css，它会保留一些浏览器的默认行为，所以不必担心。

2. 我重新设置了一些值，但它们没有生效？

可能是因为你在重置后更改的值不具有层叠性，而被其他 CSS 属性所覆盖。层叠性是一个非常重要的概念，指的是当多个 CSS 属性作用在同一个元素上时，哪个 CSS 属性将具有最高的优先级。当你遇到这种情况时，你可以使用 !important 来为你的 CSS 更改声明授予更高的优先级。

3. 我应该选择哪个 CSS Reset 库？

这完全取决于你的个人喜好。Eric Meyer's Reset CSS 和 Normalize.css 都是受欢迎的选择， Eric Meyer's Reset CSS 重置了所有属性，使其在所有浏览器中一致，而 Normalize.css 试图保留浏览器的一些默认属性。你应该选择适合你实际项目的库，并对项目中可能发生的问题进行测试，以便找到最合适的解决方案。

总结

使用 CSS Reset 可以让我们更好地控制页面的样式和布局，从而保证跨浏览器的兼容性。不同的 CSS Reset 库有不同的实现方法和目的，你可以根据需要选择适合你的 CSS Reset 库。在使用 CSS Reset 库时，你应该注意一些常见的问题，并且不断进行测试和调整，以便得出最优的解决方案。

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