请解释一下 Eric Meyer 的 CSS 重置
首先我想告诉你我为什么问这个问题。我通常会更新写得不好且没有重置的项目。我想提高项目的质量，所以看来应用 CSS 重置是绝对必要的。
我不想每次更改某些内容时都在每个浏览器中进行像素完美测试的艰苦工作，并且我不想完全重写所有 CSS。
所以：
当我写作时：
*{
margin:0;
padding:0;
border:0;
}
我知道会遇到什么麻烦：
会松动填充，而 、
这段代码更难理解：
*{
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
我对此完全困惑：
body {
line-height: 1;
}
First of all I want to tell you why I'm asking this question. I usually update projects that have been written poorly and without a reset. I want to improve the project's quality so it seems that applying a CSS reset is absolutely necessary.
I don't want to do a hard work of pixel perfect testing in every browser every time I change something and I don't want to completely rewrite all CSS.
So:
When I'm writing:
*{
margin:0;
padding:0;
border:0;
}
I know what trouble to expect: <p> will loose padding and <input>, <select>, etc. will loose padding and border. So I have to specify them manually.
This code is more difficult to understand:
*{
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
And I'm completely confused with this:
body {
line-height: 1;
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
除非另有指定，否则默认情况下，这会将文档中的所有元素设置为从父元素继承字体和字体大小，这可以防止用户代理样式表应用不太具体的规则的字体样式。
vertical-align: benchmark;是另一个广泛使用的规则，用于避免用户代理规则，这些规则并不总是将这种（我相信）预期的默认行为应用于所有元素。下面简要介绍一下它的作用：演示。在演示中，尝试将规则设置为
middle而不是 text-top。这也是一样的。如果您不熟悉行高，这很简单。您可能在没有意识到的情况下处理过它：有时它看起来是边距问题，但实际上，元素的行高超出了您的预期。当您将某种字体放入 X 高度与其他字体非常不同的设计中时，通常会发生这种情况。
如果您不理解它的功能，请将一些虚拟文本放入文档中并开始使用它。它对于在不同情况下制作良好的版式非常有用（必不可少）。
看来您不清楚 css 属性以及它们如何影响元素。你越了解这一点，你就越能更好地利用重置。由于某些原因，没有重置真正适合所有情况。例如，您可能没有使用任何
vertical-align最终可能不匹配的元素。您可能在大型重置中拥有适用于您甚至没有的元素的规则。与网页设计中的任何事情一样，如果您不理解它，实践经验会教给您很多东西。
This sets all elements in the document to inherit font and font-size from parent elements by default unless specified otherwise, which can prevent user-agent stylesheets from applying font styles with less specific rules.
vertical-align: baseline;is another widespread rule to avoid user-agent rules which don't always apply this (I believe) expected default behaviour to all elements.Here's a brief look at what this does: demo. In the demo, try setting a rule to
middlerather than text-top.This is the same. If you're not familiar with line-height, it's quite simple. You may have dealt with it without realizing it: Sometimes it appears to be a margin issue when in fact, the line height of an element is exceeding what you expected. This often happens when you place a typeface into a design which has a very dissimilar x-height to other typefaces.
If you don't understand its function, throw some dummy text into a document and start playing with it. It's very useful (essential) for producing good typography in different situations.
It seems you're not clear on css attributes and how they effect elements. The better your understand this, the better you can utilize a reset. No reset really fits all for a few reasons. For example, you might not be using any elements where
vertical-alignmay end up being mismatched. You may have rules in a large reset that apply to elements you don't even have.As with anything in web design, if you don't understand it, hands on experience will teach you a lot.
在表单上使用简单的输入控件查看此小提琴：
http://jsfiddle.net/KXYHw/
切换重置并查看输入字体和字体大小如何变化。
Check out this fiddle with simple input control on a form:
http://jsfiddle.net/KXYHw/
Toggle reset and see how input font and font size changes.