编写可扩展样式表的最重要工具就是em单位，因此它被首先介绍。使用em来制作可伸缩的样式表。它最初以字母M命名，em单位在印刷术中有一个长期的传统，即用于度量水平宽度。例如，把在美国文本中常常看到的长划线(-- )称为破折号，因为从历史观点上看，em单位具有和字母M相同的宽度。它较窄的形式(-)常常出现在欧洲文本中，与上类似称为连接号。
这么多年以来em的含义已经发生了变化。并不是所有字体都包含字母M(例如汉字)，但是所有字体都有高度。因此该术语逐渐是指字体的高度-- 而不是字母M的宽度。
注释：
em可用来制作可伸缩的样式表！
在CSS中，em单位是一种用于测量长度的通用单位(例如元素周围的页边空白和填充)。可以在水平和垂直方向使用它，这使习惯于仅把em用于水平测量的传统印刷商感到震惊。通过扩展em单位使其能够用于垂直测量，使它已变成一个强大的单位-- 因为它如此强大以至于很少使用其他长度单位。
让我们看一个简单的示例，在此我们使用em单位来设置字体大小：
<HTML>
<STYLE>
H1 { font-size: 2em }
</STYLE>
<BODY>
<H1>Movies</H1>
</BODY>
</HTML>
|
当用于指定字体大小时，em单位是指父元素的字体大小。因此，在上面的示例中H1元素的字体大小被设定为BODY元素的字体大小的两倍。为了查明H1元素的字体大小，需要了解BODY的字体大小。由于在样式表中没有指定这种字体大小，浏览器必须在其他某个方找到字体大小-- 一个恰当的地方是在用户的首选项中。因此如果用户将正常的字体大小设置为10磅，那么H1元素的字体大小就为20磅。这使得文档标题行相对于周围的文字而言更引人注目。因此，最好总是使用em来设置字体大小。
注释：
总是使用em来设置字体大小！
习惯于桌面发布的设计者可能不希望em引入的间接方式，而愿意直接指定字体大小应该是20磅。在CSS这样做是可行的(参看第5章"字体"中有关字体大小属性的描述)，但是使用em是一种更好的解决方案。假如一个视力较差的用户将他的正常字体大小设置为20pt(20磅)。如果正如所建议的那样，H1的字体大小是2em，H1元素的字体大小将会随着缩放并以40磅显示。但是如果样式表将字体大小设置为20磅，那么字体将不能缩放并且标题行的尺寸将与周围文字的大小相同。
em单位的作用并不仅限于字体大小。图3-1显示了一个所有长度都用em指定的页面设计-- 包括元素周围的填充和页边空白。
让我们首先考虑填充。在CSS中，填充是在某个元素周围添加的空白以便将该元素与其余内容相分离。填充的颜色总是与它所围绕的元素的背景颜色相同。在图3-1中，使用此条规则为右边的菜单增加了填充：
DIV.menu { padding: 1.5em } |
 |
| （点击查看大图）图3-1 使用em指定本页面上的所有长度 |
 |
| 图3-2 由于使用em来指定页边空白和 填充，它们相对于字体大小而缩放 |
DIV.menu { margin: 1.5em } |
图3-2标识出了页边空白区域。再次指出，使用em能够确保可缩放的设计。
在本书中可以找到em的另一个作用，即将大多数段落第一行的缩进尺寸设置为1.8em。相同的数值用于代码示例的左边页边空白，如下面所示：
P { text-indent: 1.8em }
PRE { margin-left: 1.8em } |
那么既然em如此重要，CSS为何还要使用其他单位呢？因为在有些情况下，其他单位也是有用的。例如，这里给出了一种百分比也同样适用的情况，即使并不比em更好：设置BODY元素的页边空白。要记住在HTML页面中显示的所有内容都在BODY内部，因此设置该元素的页边空白也就是设置页面的整体形状。使用如下这两条规则可以在页面两边提供适度宽度的页边空白：
BODY {
margin-left: 15%;
margin-right: 10%
} |
这种设置使文本占据整体宽度的75%，并且左边的页边空白比右边的页边空白略宽。尝试这样做一下！您会发现页面看起来更加专业。在BODY元素上设置的百分数值通常是相对于浏览器窗口的。因此在上一个示例中，文本将覆盖75%的浏览器窗口。
注释：
使用相对单位度量长度！
4256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
