谁能举例解释“em 是相对于字体大小而 % 是相对于父元素”？
相对于字体大小和相对于父元素的含义是什么？
问问题
2925 次
3 回答
1
看这个例子：
<div id='contain' style='height: 400px'>
<div style='height: 1.5em'>Test 1</div>
<div style='height: 50%'>Test 2</div>
</div>
在测试 1 中，框的高度是文本大小的 150%。如果字体大小为 10px，则高度为 15px。在第二个例子中，高度是父元素的 50%；在这种情况下，测试 2 是 200 像素，因为#contain是 400 像素。
如果我没记错的话，如果您将百分比应用于字体大小，它将被映射为与 em 相同。font-size: 150%与font-size: 1.5em（我认为）相同。
em我发现使用forheight或更有用width。如果您将其用于width，则在更改字体大小时（当用户更改字体大小时），文本不会更改换行点。当您的页面包含大量文本时使用它很有用，并且字体太小会导致页面太宽。（请参阅这篇关于Em 宽度的文章）
<div style='width: 80em`>Lorem ipsum...</div>
于 2010-02-01T16:31:50.803 回答
1
考虑是否要定义另一个盒子内的盒子的高度。如果您将高度指定为 50%，那么它将是包含它的盒子的一半高。如果您改为以 ems 指定高度，则其高度将取决于您使用的任何字体中字母 m 的大小，而不取决于除文本之外的任何内容的大小。
于 2010-02-01T15:53:48.193 回答
-2
em是一种印刷测量 - 基本上是字体大小的 %。而%正如你所说，它是相对于父元素的。
所以让我们采取：
body {font-size: 12px;}
p.rel-to-font { font-size: 1.5em;}
<body>
<p class="rel-to-font"> Some cool text</p>
</body>
在这个例子p.rel-to-font中会有一个有效font-size的18px。150%的12px。
body,p {font-size: 12px;}
div {font-size: 15px;}
p.rel-to-parent { font-size: 150%;}
p.rel-to-font { font-size: 1.5em;}
<body>
<div>
<p id="test-1"class="rel-to-parent"> Some cool text</p>
<p id="test-2" class="rel-to-font"> Some cool text</p>
</div>
<p id="test-3" class="rel-to-font"> Some cool text</p>
<p id="test-4" class="rel-to-parent"> Some cool text</p>
</body>
在此示例#test-1中，有效font-size值为 22.5px，#test-2将为 18px，#test-3将是18px，#test-4将是18px。
我希望能帮上忙……我真的想不出一个好的示例集……在大多数情况下%，em通常会解决同样的问题-并不总是很明显，但大多数情况下都是在实际实现中。
于 2010-02-01T15:54:29.373 回答