css中em px 区别你真的了解吗

理解em单位在网站制作中的重要性，以及如何巧妙地利用它替换像素单位px，是每一个网页设计师必须掌握的技巧。让我们深入这个话题，揭示em单位的神秘面纱。

让我们理解em单位是什么。em是一个相对单位，它的值取决于其所在的环境。在网页设计中，em常常用来定义字体大小。任何浏览器的默认字体大小都是16px，所以未经调整的浏览器都遵循一个规则：1em等于16px。这个规则给我们提供了一个便利的换算方式。

如果你想将字体大小从px转换为em，一个简单的方法是调整body选择器的字体大小。在CSS中，将body的字体大小设为62.5%，这样，em的值就会变为16px乘以62.5%，即10px。接下来，你只需要将原来的px数值除以10，然后换成em作为单位就可以了。这样，你就可以轻松地将网站字体从像素单位转换为em单位，使网站在IE6下能够支持字体缩放。

使用em单位并非一帆风顺。你可能会遇到一个诡异的现象：按照上述方法得到的12px（即1.2em）大小的汉字在IE中显示的大小并不等于直接用12px定义的字体大小。实际上，它显示得稍大一些。这个问题可以通过调整body选择器中字体大小的比例来解决。将62.5%改为63%，就能让汉字正常显示。

现在，让我们来详细一下这个过程。当你将一个元素的字体大小设为em单位时，这个值并不是固定的，它会继承其父级元素的字体大小。例如，如果一个div的字体大小设为1.2em，它的子级元素p的字体大小也会相应变化。这是因为em的值是相对的，它会随着所在的环境变化而变化。

在使用em单位时，需要重新计算那些被放大的字体的em值。这需要我们避免字体大小的重复声明。否则，可能会出现意想不到的结果。比如，如果你在main中声明了字体大小为1.2em，那么在声明p的字体大小时就不能再是1.2em，因为此时的em已经因继承content的字体高而变为了1em=12px。

使用em单位制作网站需要细心和耐心。只有掌握了em单位的特性和规律，才能充分利用它制作出适应各种浏览器的网站。希望这篇文章能帮助你更好地理解em单位，并在网站制作中发挥它的优势。