Question

有人可以解释“em是相对于字体大小而％是相对于父元素”吗？

相对于字体大小和相对于父元素的方法是什么？

Answer 1

考虑一下你是否在另一个盒子里面定义一个盒子的高度。如果你指定高度为50％，它将是它所包含的盒子的一半高。如果你用ems指定高度，它的高度将取决于你使用的任何字体的字母m的大小，并且不依赖于除文字之外的任何大小。

Answer 2

看看这个例子：

<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是200px，因为#contain是400px。

如果我没记错的话，如果你将百分比应用于font-size，它将被映射为与em相同。 font-size: 150%与font-size: 1.5em相同（我认为）。

我发现em或height使用width会更有用。如果将其用于width，则在更改字体大小时（当用户更改字体大小时），文本不会更改换行点。当您的页面含有大量文本时使用它很有用，而且字体太小会导致页面太宽。（请参阅Em Widths）

上的这篇文章

<div style='width: 80em`>Lorem ipsum...</div>

Answer 3

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%的{{1}}。

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为22.5px，font-size为18px，#test-2为#test-3，{{1将是18px。

我觉得这有帮助..我无法想出一个好的例子集......在大多数情况下，#test-4和18px通常会做同样的事情 - 并不总是显而易见但是大部分时间都是在实际实施中。

任何人都可以解释“em是相对于字体大小而％是相对于父元素”的例子吗？

3 个答案: