什么是高度?

问题描述 投票:18回答:7

我还不清楚它们的大小是什么意思? 我在CSS中使用过px,pt。 0.8,1.0和1.2 em意味着什么? 我在CSS中看到了高度:高度:0.8em;或身高:1.2em; 它是如何计算的?

css size height
7个回答
27
投票

多年来,“em”的含义发生了变化。并非所有字体都包含字母“M”(例如,中文),但所有字体都有高度。因此,该术语意味着字体的高度 - 而不是字母“M”的宽度。

让我们看一个简单的例子,我们使用em单位来设置字体大小:

<html>
  <style>
    h1 { font-size: 2em }
  </style>
  <body>
    <h1>Movies</h1>
  </body>
</html>

当用于指定字体大小时,em单位指的是父元素的字体大小。因此,在前面的示例中,h1元素的字体大小设置为body元素的字体大小的两倍。要查找h1元素的字体大小,我们需要知道body的字体大小。因为样式表中没有指定,所以浏览器必须从其他地方找到它 - 一个好看的地方就是用户的偏好。因此,如果用户将正常字体大小设置为10磅,则h1元素的大小为20磅。这使得文档标题相对于周围文本突出。因此:始终使用ems来设置字体大小!

More Info


17
投票

1em等于当前的字体大小。

2em意味着当前字体大小的2倍。

例如,如果元素显示为12 pt的字体,则'2em'为24 pt。 'em'是CSS中非常有用的单元,因为它可以自动适应阅读器使用的字体

这是其他CSS单元的链接:

http://www.w3schools.com/cssref/css_units.asp


3
投票

1em等于当前的字体大小。 2em意味着当前字体大小的2倍。例如,如果元素显示为12 pt的字体,则'2em'为24 pt。 'em'是CSS中非常有用的单元,因为它可以自动适应阅读器使用的字体。

more here


2
投票

em是字母“m”的宽度(以您当前的字体和大小)。


2
投票

保罗是正确的,但它的“M”不是“m”。然而,这是从排版/打印中得出的深奥定义,并且在这种情况下没有多大用处。就什么对你有用而言,它是一个字体大小的百分比。


2
投票

Em是一个角色的大小。它会根据字体大小而有所不同。如果字体大小为24,那么2Em将等于保存字体大小24的两个字符所需的空间。

正如维基引用的那样。

em是排版领域的度量单位。此单位定义字母宽度和高度相对于当前字体的磅值的比例。

仅供参考:恩是Em的一半。 0.5Em


0
投票

em表示“短暂单位”,它相对于其父元素的当前字体大小。例如,<h1>标题中的文本默认为2em。这来自于<h1>从其父元素(文档的<body>)继承其文本大小这一事实。如果我将<body>字体大小设置为16px(font-size:16px;)。我的<h1>是2em将继承32px的大小,因为2em是1em的两倍大小。在这种情况下,1em = 16px,因此2em = 2x16px = 32px。现在,如果您使用以下内容创建HTML文档

<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>

然后定义以下CSS规则。

body {font: normal 16px Arial, Helvetica, sans-serif;}

在Web浏览器(Chrome)中打开页面并打开浏览器开发工具(ctrl+shift+I),您将看到<h1>的默认字体大小为2em。您还将在样式选项卡上看到它是“从身体继承”。虽然仍然在此方案的开发工具中,您可以在Box模型图上看到上边距和下边距的<h1>边距为21.440px。如果你查看<h1>的CSS默认值,你可以看到margin-block-start: 0.67em;margin-block-end: 0.67em;记住大小是相对于父元素的字体大小,所以0.67em是相对于<h1>字体大小而不是<body>的字体大小,你可以验证这是一个小数学,0.67em x 32px = 21.440px,这是Box模型图中<h1>边距的大小。有关更多信息,请尝试http://www.123webconnect.com/convert-px-em.php

© www.soinside.com 2019 - 2024. All rights reserved.