CSS 重置 - 它到底是做什么的？答案

【问题标题】：CSS reset - What exactly does it do?CSS 重置 - 它到底是做什么的？
【发布时间】：2012-07-20 11:53:19
【问题描述】：

我在一个 jquery 图像滑块演示中找到了这个 reset.css 文件，但它从未包含在主 index.html 文件中。应该做什么，更重要的是，你把它放在哪里？你把它放在之前任何引用的样式表（）？

这里是reset.css里面的代码

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}
html,body {
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
input{
    border:1px solid #b0b0b0;
    padding:3px 5px 4px;
    color:#979797;
    width:190px;
}
address,caption,cite,code,dfn,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0;
}

【问题讨论】：

@sandeep：“可以使用吗”与“它有什么作用”并不相同
重复What's the purpose of using CSS browser reset code?

标签： css

【解决方案1】：

一开始，样式的工作方式没有标准化，每个浏览器都实现了它认为正确的方式。您在 IE 中看到如此多关于样式错误的问题的原因之一是，IE 是在样式方面与其他浏览器最不同的浏览器。尽管 IE 已经改进，其他浏览器也有所改进，但它们仍然将自己的边框、填充和边距、缩放、字体应用于元素，以赋予页面自己独特的感觉。一个例子是，chrome 为文本框提供了自己的黄色边框。 “重置”实际上将所有这些样式“重置”为零/无，因此您看不到任何未应用到页面的样式。

如果这些样式未“重置”，您将看到不需要的样式/效果和破坏。通常建议“重置”浏览器的样式。

看看这篇文章Should you Reset Your CSS?

【讨论】：

我认为你回答了我的问题最好，因为你还包括一篇关于重置 CSS 的利弊的文章......谢谢
“总是建议重置浏览器的样式”是不正确的。关于重置的主题有很多讨论，但通常（优秀的）开发人员倾向于不重置。只需设置您需要的特定样式，更简洁、更快速（页面渲染）。
@TravisO true 但这意味着 UI 开发人员必须更加小心不要使用默认标签。

【解决方案2】：

reset.css 用于规范化浏览器的默认样式。

例子：

【讨论】：

我想你也应该提一下参考，它会帮助其他人webpagefx.com/blog/web-design/…

【解决方案3】：

看看这里的答案，“重置”和“正常化”之间似乎有些混淆。他们的目标略有不同。

CSS 重置是您在其他样式之前加载的一组样式，用于删除浏览器内置样式。第一个也是最受欢迎的一个是 Eric Mayer 的Reset CSS。

另一个选择是协调浏览器内置样式。目前最流行的工具是Normalize.css。

【讨论】：

【解决方案4】：

浏览器有不同的“内置”样式，它们适用于不同的 html 元素。这些样式定义可能因不同的浏览器而异。规范化 css 文件旨在通过重置这些特定于浏览器的样式来“规范化”跨浏览器的页面呈现。

您必须在您自己的样式定义之前包含它。否则这些样式也可能会覆盖（由于 css 的级联性质）你的声明，这没有多大意义；）

最流行的样式重置可能是Eric Meyer's，它带有一些背景信息..

【讨论】：

【解决方案5】：

浏览器可以根据其本机渲染引擎渲染接收到的 HTML 和 CSS。不同的浏览器可能使用不同的渲染方法 [IE ;) 如果你明白我的意思] 所以 reset.css 的意图是将所有属性设置为通用的预定义值，这样开发人员/设计人员就可以忘记一些渲染引擎并从头开始开发。

【讨论】：

【解决方案6】：

每个浏览器都有自己的默认user agent 样式表，用于使无样式的网站看起来更清晰。例如，大多数浏览器默认将链接设为蓝色，将访问链接设为紫色，为表格提供一定数量的边框和填充，将变量font-sizes 应用于H1、H2、H3 等以及一定数量几乎所有东西的填充。

有没有想过为什么提交按钮在每个浏览器中看起来都不一样？

显然，这给 CSS 作者带来了一定程度的头痛，他们不知道如何让自己的网站在每个浏览器中看起来都一样。

使用 CSS 重置，CSS 作者可以强制每个浏览器将其所有样式重置为 null，从而尽可能避免跨浏览器的差异。

根据您通过重置设置的一致基础，您可以继续重新设置文档的样式，确保浏览器在其默认 HTML 呈现方面的差异不会影响您！

希望它有所帮助，您可能想看看这篇文章，Which CSS Reset Should I Use?。

【讨论】：

【解决方案7】：

CSS 重置（或“重置 CSS”）是一种简短的、通常是压缩的（缩小的）一组 CSS 规则，将所有 HTML 元素的样式重置为一致的基线。

如果您不知道，每个浏览器都有自己的默认用户代理的样式表，它用来使无样式的网站看起来更多易读。例如，大多数浏览器默认将链接设为蓝色，访问过的链接紫色，给表格一定数量的边框和填充，将可变字体大小应用于 H1、H2、H3 等和某个几乎所有东西的填充量。有没有想过为什么提交每个浏览器中的按钮看起来都不一样？

显然，这给 CSS 作者带来了一定的麻烦，谁不知道如何让他们的网站在每个网站看起来都一样浏览器。

使用 CSS 重置，CSS 作者可以强制每个浏览器都将其所有样式重置为空，从而尽可能避免跨浏览器的差异尽可能

参考http://www.cssreset.com/what-is-a-css-reset/

【讨论】：

【解决方案8】：

简单来说，由于浏览器的不一致，需要重置 CSS。详细来说，所有浏览器的渲染都不一样。因此，Web 渲染可能因浏览器而异。

如果您想使用/重置，Meyer Web 提供了最大的 CSS 重置代码。你可以找到它here。如果您需要更多详细信息，here 也可以详细了解 CSS 重置的内容以及我们需要使用它的原因。

【讨论】：