为什么用em而不是px？

我问这个问题的原因是，我忘记了如何使用em，因为我在CSS中愉快地编程时已经很久了。人们没有注意到我把这个问题笼罩了，因为我并不是在谈论字体本身的大小。我对如何在页面上的
任何给定块元素 上定义样式更感兴趣。

正如Henrik Paul和其他人指出的，em与元素中使用的字体大小成正比。在px中以块元素定义大小是一种常见的做法，但是，在浏览器中调整字体大小通常会破坏这种设计。调整字体大小通常是通过快捷键

Ctrl

+

Ctrl

-

使用px定义宽度

这是一个说明性的例子。假设我们有一个div标签，我们希望将其变成一个时尚的日期框，我们可能会有如下所示的HTML代码：

<div >    <p >July</p>    <p >4</p></div>

一个简单的实现将以

date-box

* { margin: 0; padding: 0; }p.month { font-size: 10pt; }p.day { font-size: 24pt; font-weight: bold; }div.date-box {    background-color: #DD2222;    font-family: Arial, sans-serif;    color: white;    width: 50px;}

问题

但是，如果我们要在浏览器中放大文本大小，则设计会中断。文字也会在框外出血，这与flodin指出的SO设计中的情况几乎相同。这是因为该框的宽度保持与锁定时相同的大小

50px

改用em

一个更聪明的方法是用ems定义宽度：

div.date-box {    background-color: #DD2222;    font-family: Arial, sans-serif;    color: white;    width: 2.5em;}* { margin: 0; padding: 0; font-size: 10pt; }// Initial width of date-box = 10 pt x 2.5 em = 25 pt// Will also work if you used px instead of pt

这样，您就可以在日期框上进行流畅的设计，即框将与文本一起按日期框定义的字体大小按比例放大。在此示例中，font-
size的定义

*