css中强大的em,css的em属性学习全攻略

4、到过，不信你就试试你自己制作过的项目，你会觉得很恐怖）。大家可以查看这个弹性布局样例。此时你使用浏览器的UI控件改变了文字的大小或者直接“ctrl+”和“ctrl-”，你会发现这个弹性布局实例，在浏览器改变字体大小浏览会做出相应的放大和缩小，并不会影响整个页面的布局。注：这个实例的所有HTML和CSS在本教程中教程了都会使用到。至于其他的弹性布局的实例，大家可以浏览DanCederholm的Simplebites，并改变文字的大小去浏览。体验后，是不是觉得弹性布局的页面很灵活呀，而且也像“px”一样的精确。因此，只

5、要我们掌握了“font-size”、“px”和“em”之间的基本关系，我们就可以民以食快速使用CSS创建精确的布局。CSS的Elastigirl引进EMElastigirl的“em”是极其强大和灵活的，他不管字体大小是什么，是12px，16或60，他都可以计算出其值。em其实就是一种排版的测试单位，而且他的由来还有一段小故事，关于这段小故事我就不和大家说了，因为大家都不是来听我讲故事的，我想大还是喜欢知道他在CSS中的那些事。在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而

6、和它所占据的水平空间没有任何的关系，因此：如果字体大小是16px，那么1em=16px。入门在我们开始来了解CSS中的这个“em”之前，我们需要知道在浏览器下，他的默认字体大小。正好我们前面也这样做了，在所有现代浏览器中，其默认的字体大小就是“16px”。因此在浏览器下默认的设置将是：1em=16px因此，在一个CSS选择器被写入时，浏览器就有了一个“16px”大小的默认字体。此时我们Web页面中的就继承了这个“font-size:16px;”，除非你在CSS样式中显式的设置的“font-s

7、ize”值，来改变其继承的值。这样一来，“1em=16px”、“0.5em=8px”、“10em=160px”等等，那么我们也可以使用“em”来指定任何元素的大小。设置Body的font-size很多前辈在多年的实践中得出一个经验，他们建议我们在中设置一个正文文本所需的字体大小，或者设置为“10px”，相当于（“0.625em或62.5%”），这样为了方便其子元素计算。这两种都是可取的。但是我们都知道，的默认字体是“16px”，同时我们也很清楚了，我们改变了他的默认值，要让弹性布局不被打破，

8、就需要重新进行计算，重新进行调整。所以完美的设置是：body{font-size:1em;}可是在那个没人爱的IE底下，“em”会有一个问题存在。调整字体大小的时候，同样会打破我们的弹性布局，不过还好，有一个方法可以解决：html{font-size:100%;}公式转换——PXtoEM如果你是第一创建弹性布局的，最好在身边准备一个计算器，因为我们一开始少不