0

我正在阅读这篇文章 ，在“继承使用计算值”一章中，他们说如下：

这对于使用长度的字体大小等继承值很重要。计算值是相对于网页上的某个其他值的值。

如果您在 BODY 元素上设置 1em 的字体大小，您的整个页面将不会全部只有 1em 大小。这是因为标题 (H1-H6) 等元素和其他元素（某些浏览器计算表格属性的方式不同）在 Web 浏览器中具有相对大小。在没有其他字体大小信息的情况下，Web 浏览器总是会让 H1 标题成为页面上最大的文本，其次是 H2，以此类推。当您将 BODY 元素设置为特定的字体大小时，它被用作“平均”字体大小，并且标题元素是从中计算出来的。

因此，如果您在浏览器中将文本大小设置为正常，则 1em 与 16px 大致相同。如果您知道选择在浏览器中设置更大的文本大小，则文本会更大。

所以我想知道他们想用这篇文章说什么？

4

2 回答 2

1

这意味着，当您font-size在元素上设置时，它的实际值与在父元素中设置的值相关。

示例：演示

<div id="test1">
    <h1>First header</h1>
</div>
<div id="test2">
    <h1>Second header</h1>
</div>

h1 { font-size: 1.5em; }

#test1 { font-size: 1em; }
#test2 { font-size: 2em; }

font-size: 1.5emonh1元素是相对于它的父元素计算的，第二个标题更大。

于 2013-08-22T11:34:55.137 回答
0

它基本上是说这都是相对的，所以假设你的 body 是 16px，除非你特别指定所有东西都将从这个值计算其他标签。

如果您使用 em，则 1em 将是顶部元素的 16px。

例子：

<div class="monkeyAss">Hello
<h1>monkeyAss2</h1></div>

.monkeyAss {font-size: 0.5em;}
.monkeyAss h1 {font-size: 1em}

在这里，你的 monkeyAss 将是预期的 8px，对于 1em，但由于 h1 在另一个父 div 内，它也将是 8px，从其相对父级获取它的值。希望有帮助。

于 2013-08-22T11:18:07.147 回答