【发布时间】:2019-11-14 21:10:51
【问题描述】:
我正在审查一个级联样式表,该样式表最初由外部商店开发,然后在内部进行了大量修改。我们正在尝试对其进行一些优化,以删除在此期间引入的一些特殊情况和变通方法,我注意到许多样式中有一些奇怪的地方:
element {
font-size:1em;
}
这里,element 不是字面意思;它是一些任意元素名称、类名等。
我相信以下是正确的:
- 除非另有说明,否则
font-size继承自父元素 - 当前
font-size可以表示为1em、1ex、1ch或100%
这意味着font-size:1em 与完全不指定字体大小完全一样,对吧?
在文件的最顶部,有这样的定义:
*,* * {
font-size: 1em;
}
这也特别不做任何事情,但对所有元素都有作用。
没有font-size:1em,我可能会看到一个潜在的问题:字体大小变化失控。如果我有:
span.larger {
font-size:larger;
}
那么这可能会使文本增长不少:
<span class="larger">
This text is a little bigger
<span>and bigger
<span>and bigger</span>
</span>
</span>
但它实际上并非如此:font-size:larger 仅应用于外部跨度,而不应用于那些内部跨度。 计算的字体大小是继承的,而不是字体大小的定义(这会导致失控embiggening。
我使用过浏览器工具,例如 Firefox 的检查器、Chrome 的开发工具等,禁用这些样式似乎并没有改变页面的外观,但我还没有对整个网站进行详尽的审查。
我错过了什么吗?或者我可以简单地删除所有实例
font-size:1em
?
更新 我显然错过了当你使用字体大小和嵌套元素做一些更复杂的事情时会发生什么:
div {
font-size:1.5em;
}
<div>
Bigger
<div>
and bigger
<div>etc.</div>
</div>
</div>
这会导致embiggening 失控。这有点病态,因为将所有divs 定义为大于其父母可能不是您想要做的。但是嵌套列表,例如ol ol ol 肯定会导致问题。
那么,这种结构是防止字体大小失控增加的预防措施吗?
* * {
font-size:1em;
}
【问题讨论】:
标签: css