Question

我正在阅读this article 在“继承使用计算值”一章中，他们说出以下内容：

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

如果您在BODY元素上设置了1em的字体大小，那么整个页面都是如此   不会只是1em的大小。这是因为元素之类的   标题（H1-H6）和其他元素（某些浏览器计算表格   不同的属性）在Web浏览器中具有相对大小。在   如果没有其他字体大小信息，Web浏览器就会   始终将H1标题设为页面上最大的文本，然后是   H2等等。将BODY元素设置为特定字体大小时，   然后用作“平均”字体大小和标题   元素是从那里计算出来的。

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

所以我想知道他们试图用文章说什么？

Answer 1

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

示例：DEMO

<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.5em元素上的

h1相对于其父级计算，第二个标题更大。

Answer 2

它基本上都是说它都是相对的，所以让我们说你的身体是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，从其相对父级获取其值。希望有所帮助。

这意味着继承使用计算值

2 个答案: