css div里引用em字体会变斜体_浅谈css中EM转换规则

经常看大神们写的代码，哎呦呦那叫一个厉害呀！咱也想照葫芦画瓢，可是底层的东西如果不懂，那你画出来的瓢指定也不是好瓢。

经常看见天狗的代码中出现“em”，0.25em，0.156em，大神就是不一样，写出来的代码都让人看不懂，不想现在的我，基本上写的都是px，1px，50px，直接给写死！就让你这么大，你能怎样？

可是问题来了，写死的大小总是会出现各种各样的问题，有木有！

在写“em”之前，我们先讨论一下什么是弹性布局吧~

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

浏览器默认的文字大小是16px，也就是说，你写出来的文章，在body标签下，默认浏览器渲染的大小就是16px。当然如果用户喜欢更改UI控件，也能修改默认的大小。

弹性布局有个最大的设计，就是，所有的元素都使用“em”来控制文字，div的大小，不是他们装文化人，是这样才能形成弹性布局！弹性弹性，只有有弹性才能称为弹性布局嘛~你都给写死了，哪来的弹性...

这么讲，没问题吧？

相对的计算必然会一个参考物，那么这里相对所指的是相对于元素父元素的font-size。比如说：如果在一个

设置字体大小为“16px”，此时这个

的后代元素教程了是将继承他的字体大小，除非重新在其后代元素中进行过显示的设置。此时，如果你将其子元素的字体大小设置为“0.75em”，那么其字体大小计算出来后就相当于“0.75 X 16px = 12px”；

如果用户通过浏览器的UI控件改变了文字的大小，那么我们整个页面也会进行放大(或缩小)，不至于用户改变了浏览器的字体后会致使整个页面崩溃(我想这种现像大家都有碰到过，不信你就试试你自己制作过的项目，你会觉得很恐怖)。

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

刚刚说过了，现在的浏览器，默认的字体大小就是16px。也就是说，

1em=16px

我们举个例子来说：使用CSS的EM制作一个960px宽度的弹性布局

将960px转换为em

1/16*960=60em

这个转换的前提的，body{font-size:16px}；

根据这个规则，我们再看一个例子

默认情况下，body的字体大小为16px，此时div#wrapper相关参数为

按照上面的参数进行转换，

我们计算一下出来的值

接下来的设置很关键，我们要将文字的字体大小设置为14px，看看有什么效果哈

我们看一下计算出来的值

为了更好的说明一下问题，我们来对比着看一下其中的不同，会有很大的发现哦

这张图想要说明什么？就是，如果单独设置了字体的大小，那么再使用原来的计算方法就会出现很大的问题了。我们要在这里做一下修改

总结

说了这么多，我们想要得到什么呢？

1.浏览器的默认字体大小为16px；

2.如果使用默认字体，也就是16px，我们如果想转换成em为单位长度，那么计算公式为

1÷父元素的font-size*需要转换的元素值=em值；

3.如果设置了font-size的值，那么字体的转换公司与默认的转换公式相同，

1÷父元素的font-size*需要转换的元素值=em值；

此元素的其他属性，如border，margin，padding，width，height的值，计算的公式为，

1÷设置的font-size*需要转换的元素值=em值，这一点很重要，很重要，很重要；

说的就是这么多了，今天就写到这里了。今天是2017.09.25，好日子，每天都有好心情，上班的日子其实充满了乐趣，可以跟这么多优秀的人在一起共事，是我的荣幸。