本文给大家带来CSS长度单位之em介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
一、为什么使用em
em也是css中的一种单位，和px类似。很多人会疑惑为什么有了px之后还要使用em，而且em使用起来相对于px来讲比较麻烦。
em主要是应用于弹性布局，下面给出一个小栗子说明em的强大之处Documentem测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例，没有em的情况
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
em测试用例有em的强大之处
这里模仿了一个网页的大致布局，给出使用em和px的区别。
在正常情况下，em和px看起来没什么区别。如下图
可以看到使用px的左边已经完全崩溃了，看不出来具体的文字了。而右边使用em的仍然可以清楚的看到文字。造成这种现象的主要原因是em是相对大小，使用em时对页面进放大或缩小不会造成太大的影响。
既然是相对大小，那么就会有参考大小，em的参考大小是当前元素的字体大小。这时又会引发一个问题，既然是当前元素的字体大小作为参考，那么当前字体以em为单位时又是以什么作为参考呢？这时是以其父级元素的字体大小作为参考。
因此当整个页面都是使用em作为字体大小的情况下，页面中的1em就是浏览器默认的字体大小为16px;
二、em的具体使用：
1、设置body{font-size：1em}
在设置好body的字体大小的情况下，由于body字体是继承浏览器默认是16px，那么这时只要网页上全是用em，那么1em=16px；
2、开始计算元素具体需要的大小
(1)如果元素的字体大小是继承于上层即16px，那么在元素内部1em=16px；因此计算方法如下
需要的em值=当前元素的px值/父元素的字体大小值px(一般是16px)
例如：1px=1/16=0.0625em，18px=18/16=1.125em
(2)如果元素的字体大小是自己设置的
当前元素的字体大小的em值=当前元素字体大小px/父元素字体大小px
当前元素需要的其他em值=当前元素的px值/元素自身的字体大小px
下面通过一个例子进行具体的解释Document
aaa son1
aaa son2
打开浏览器中显示的.son1盒子的盒子模型，以及网页结果图具体入下
可以发现.son1 和.son2 一模一样。
.son1 的字体大小为 2em 对应的px为 2*16=32px；(反过来可以验证公式 当前元素的字体大小的em值(2)=当前元素字体大小px(32)/父元素字体大小px(16))
高度宽度为5em 对应px为 5*32=160px；(反过来可以验证公式当前元素需要的其他em值(5)=当前元素的px值(160)/元素自身的字体大小px(32))
注意：在ie5/6中还需要添html { font-size：100%} 以保证弹性布局(但是目前ie5/6基本没有，而且这条是根据文章 《The Incredible Em & Elastic Layouts with CSS》 得知的,本人并没有试出来具体问题在哪。。先记下，以后遇到类似情况使用)
3、rem的使用
rem使用方法和em类似，不过rem是相对于根元素的大小(即html的字体大小)，而不是自身的大小。2中的栗子中的.son1 的相关带em的属性全改为rem 代码如下Document
aaa son1
aaa son2
结果图为：
div/css图文教程
4236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
