CSS中强大的EM

使用CSS也好久了，但一直都是在使用“px”来设置Web元素的相关属性，未敢使用“em”。主要原因是，对其并不什么了解，只知道一点概念性的东西，前段时间在项目中要求使用“em”作为单位设置元素，所以从头对“em”学习了一回。稍为有一点理解，今天特意整理了一份博文与大家一起分享，希望对童子们有些许的帮助。

这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。著作权归作者所有。

1 什么是弹性布局？

用户的文字大小与弹性布局

用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。当然，如果用户愿意他可以改变这种字体大小的设置，用户可以通过UI控件来改变浏览器默认的字体大小。

弹性设计有一个关键地方Web页面中所有元素都使用“em”单位值。“em”是一个相对的大小，我们可以这样来设置1em，0.5em，1.5em等，而且“em”还可以指定到小数点后三位，比如“1.365em”。而其中“相对”的意思是：

• 相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的font-size。比如说：如果在一个<div>设置字体大小为“16px”，此时这个<div>的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；
• 如果用户通过浏览器的UI控件改变了文字的大小，那么我们整个页面也会进行放大（或缩小），不至于用户改变了浏览器的字体后会致使整个页面崩溃（我想这种现像大家都有碰到过，不信你就试试你自己制作过的项目，你会觉得很恐怖）。

大家可以查看这个弹性布局样例。此时你使用浏览器的UI控件改变了文字的大小或者直接“ctrl + ”和“ctrl - ”，你会发现这个弹性布局实例，在浏览器改变字体大小浏览会做出相应的放大和缩小，并不会影响整个页面的布局。注：这个实例的所有HTML和CSS在本教程中教程了都会使用到。

至于其他的弹性布局的实例，大家可以浏览Dan Cederholm的Simplebites，并改变文字的大小去浏览。

体验后，是不是觉得弹性布局的页面很灵活呀，而且也像“px”一样的精确。因此，只要我们掌握了“font-size”、“px”和“em”之间的基本关系，我们就可以民以食快速使用CSS创建精确的布局。

2 CSS的Elastigirl引进EM

Elastigirl的“em”是极其强大和灵活的，他不管字体大小是什么，是12px，16或60，他都可以计算出其值。

em其实就是一种排版的测试单位，而且他的由来还有一段小故事，关于这段小故事我就不和大家说了，因为大家都不是来听我讲故事的，我想大还是喜欢知道他在CSS中的那些事。

在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系，因此：

如果字体大小是16px，那么1em=16px。

未完待续，这篇文章非常好。

http://www.w3cplus.com/css/px-to-em