1

首先我想告诉你我为什么要问这个问题。我通常会更新写得不好且没有重置的项目。我想提高项目的质量,所以似乎应用 CSS 重置是绝对必要的。

我不想每次更改某些内容时都在每个浏览器中进行像素完美测试,也不想完全重写所有 CSS。

所以:

当我写作时:

*{
    margin:0; 
    padding:0;
    border:0;
}

我知道会发生什么麻烦:<p>会松动填充,<input>, <select>, etc. 会松动填充和边框。所以我必须手动指定它们。

这段代码比较难理解:

*{
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

我对此完全感到困惑:

body {
    line-height: 1;
}
4

2 回答 2

9
*{
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

这会将文档中的所有元素设置为默认情况下从父元素继承字体和字体大小,除非另有说明,否则会阻止用户代理样式表应用具有较少特定规则的字体样式。

vertical-align: baseline;是避免用户代理规则的另一个普遍规则,这些规则并不总是将这个(我相信)预期的默认行为应用于所有元素。

下面简要介绍一下它的作用:demo。在演示中,尝试将规则设置为middle而不是 text-top。

body {
    line-height: 1;
}

这是一样的。如果您不熟悉行高,那很简单。您可能在没有意识到的情况下处理了它:有时它似乎是一个边距问题,而实际上,元素的行高超出了您的预期。当您将字体放入与其他字体具有非常不同的 x 高度的设计中时,通常会发生这种情况。

如果您不了解它的功能,请将一些虚拟文本放入文档中并开始使用它。它对于在不同情况下产生良好的排版非常有用(必不可少)。

您似乎不清楚 css 属性以及它们如何影响元素。您越了解这一点,您就越能更好地利用重置。由于几个原因,没有真正适合所有重置。例如,您可能没有使用任何vertical-align最终可能不匹配的元素。您可能在大型重置中拥有适用于您甚至没有的元素的规则。

与网页设计中的任何事情一样,如果您不了解它,动手经验会教给您很多东西。

于 2011-10-24T19:41:08.363 回答
3

在表单上使用简单的输入控件查看这个小提琴:

http://jsfiddle.net/KXYHw/

切换重置并查看输入字体和字体大小如何变化。

于 2011-10-24T19:41:19.393 回答