CSS 重置 - 它究竟是做什么的？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11578819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS reset - What exactly does it do?
提问by Dexter Schneider
I found this reset.css file inside a jquery image slider demo, but it was never included in the main index.html file. what is is suppose to do, and more importantly, where do you put it? Do you put it beforeany referenced stylesheets()?
我在 jquery 图像滑块演示中找到了这个 reset.css 文件，但它从未包含在主 index.html 文件中。应该做什么，更重要的是，你把它放在哪里？你把它之前任何引用的样式表（）？
Here is the code inside reset.css
这是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;
}
回答by Ashwin Singh
In the beginning there was no standardisation on how styles worked, each browser implemented what it felt was right. One of the reasons you see so many questions about style errors in IE is because IE was the browser with most dissimilarities from other browsers in terms of styling. Though IE has improved and so have other browsers they still apply their own borders, padding and margins, zoom, fonts to elements to give their own unique feel to pages. One example is, chrome gives its own yellow borders to text boxes. The "reset" actually "resets" all these styles to zero/none, so that you don't see any styles you haven't applied in your page.
一开始没有关于样式如何工作的标准化，每个浏览器都实现了它认为正确的东西。您在 IE 中看到如此多关于样式错误的问题的原因之一是因为 IE 是与其他浏览器在样式方面最不相似的浏览器。尽管 IE 和其他浏览器都得到了改进，但它们仍然对元素应用自己的边框、填充和边距、缩放、字体，以赋予页面自己独特的感觉。一个例子是，chrome 为文本框提供了自己的黄色边框。“重置”实际上将所有这些样式“重置”为零/无，这样您就看不到页面中未应用的任何样式。
If these styles are not "reset", you will see unwanted styles/effects and things breaking. Its always recommended to "reset" the browser's styles.
如果这些样式没有“重置”，您将看到不需要的样式/效果和破坏。始终建议“重置”浏览器的样式。
Have a look at this article Should you Reset Your CSS?
看看这篇文章你应该重置你的 CSS 吗？
回答by vlady
reset.css is used to normalize browser's default styles.
reset.css 用于规范浏览器的默认样式。
Example:
例子：
回答by Henrik
Looking at the answers here there seems to be a bit of mixup between "reset" and "normalize". Their goals are slightly different.
看看这里的答案，“重置”和“规范化”之间似乎有些混淆。他们的目标略有不同。
A CSS reset is a set of styles you load prior to your other styles, to remove browser built-in styles. One of first and most popular ones was Eric Mayer's Reset CSS.
CSS 重置是您在其他样式之前加载的一组样式，用于删除浏览器内置样式。第一个也是最受欢迎的一个是 Eric Mayer 的Reset CSS。
Another option is to harmonize browser built-in styles. The most popular tool to achieve this is currently Normalize.css.
另一种选择是协调浏览器内置样式。目前最流行的工具是Normalize.css。
回答by Christoph
Browser have different "built-in" styles which they apply to different html-elements. These styledefinitions may vary accross different browsers. The normalizing css files are meant to ?normalize“ the rendering of the page across browsers by resetting these browser-specific styes.
浏览器具有不同的“内置”样式，它们适用于不同的 html 元素。这些样式定义可能因不同的浏览器而异。规范化 css 文件旨在通过重置这些特定于浏览器的样式来“规范化”跨浏览器的页面呈现。
You have to include it beforeyour own style definitions. Otherwise these styles would possibly override (due to the cascading nature of css) your declarations too, which wouldn't make much sense;)
您必须在自己的样式定义之前包含它。否则，这些样式也可能会覆盖（由于 css 的级联性质）您的声明，这没有多大意义；）
The most popular styles reset is probably Eric Meyer'swhich comes along with a little background information..
最流行的样式重置可能是Eric Meyer 的，它附带了一些背景信息。
回答by Shiham
Browsers may render the HTML and CSS received according to its native rendering engine. Different browsers may use different rendering approaches [IE ;) if you know what i mean]so the intension of reset.css is to set all the attributes to common predefined values so the developers/ designers are can forget some rendering engine and start development from the scratch.
浏览器可以根据其本机呈现引擎呈现接收到的 HTML 和 CSS。不同的浏览器可能使用不同的渲染方法 [IE ;) 如果你知道我的意思]所以 reset.css 的意图是将所有属性设置为通用的预定义值，以便开发人员/设计人员可以忘记一些渲染引擎并开始开发划痕。
回答by Adrien
Every browser has its own default user agentstylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3, etc. and a certain amount of padding to almost everything.
每个浏览器都有自己的默认user agent样式表，它用来使无样式的网站看起来更清晰。例如，大多数浏览器默认生成链接蓝色和已访问链接的紫色，给表一定量的边框和填充，适用变量font-sizes到H1，H2，H3等，几乎都一定量的填充。
Ever wondered why Submit buttons look different in every browser?
有没有想过为什么提交按钮在每个浏览器中看起来都不一样？
Obviously this creates a certain amount of headaches for CSS authors, who can't work out how to make their websites look the same in every browser.
显然，这给 CSS 作者带来了一定的麻烦，他们无法弄清楚如何让他们的网站在每个浏览器中看起来都一样。
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
使用 CSS 重置，CSS 作者可以强制每个浏览器将其所有样式重置为 null，从而尽可能避免跨浏览器差异。
From the consistent base that you've set up via your reset, you can then go on to re-style your document, safe in the knowledge that the browsers' differences in their default rendering of HTML can't touch you!
从您通过重置设置的一致基础开始，您可以继续重新设置文档的样式，因为浏览器在默认 HTML 呈现方面的差异不会影响您！
Hopefully it helped, you may want to take a look at this article, Which CSS Reset Should I Use?.
希望它有所帮助，您可能想看看这篇文章，我应该使用哪个 CSS 重置？.
回答by Rohan Patil
A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn't know, every browser has its own default ‘user agent' stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can't work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible
CSS 重置（或“重置 CSS”）是一组简短的、经常被压缩（缩小）的 CSS 规则，用于将所有 HTML 元素的样式重置为一致的基线。
如果您不知道，每个浏览器都有自己的默认“用户代理”样式表，它用来使无样式的网站看起来更清晰。例如，大多数浏览器默认将链接设为蓝色，将访问的链接设为紫色，为表格提供一定量的边框和内边距，将可变字体大小应用于 H1、H2、H3 等，并对几乎所有内容应用一定量的内边距。有没有想过为什么提交按钮在每个浏览器中看起来都不一样？
显然，这给 CSS 作者带来了一定的麻烦，他们无法弄清楚如何让他们的网站在每个浏览器中看起来都一样。
使用 CSS 重置，CSS 作者可以强制每个浏览器将其所有样式重置为 null，从而尽可能避免跨浏览器差异
