css长度单位之em的使用示例

小编给大家分享一下css长度单位之em的使用示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联公司服务项目包括湖里网站建设、湖里网站制作、湖里网页制作以及湖里网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，湖里网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到湖里省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

一、为什么使用em

em也是css中的一种单位，和px类似。很多人会疑惑为什么有了px之后还要使用em，而且em使用起来相对于px来讲比较麻烦。

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的强大之处
                
em测试用例有em的强大之处
            
        

    

这里模仿了一个网页的大致布局，给出使用em和px的区别。

在正常情况下，em和px看起来没什么区别。如下图

接下来，按住ctrl键并连续按 ‘-’（减号）键，对页面不断进行缩小。缩小到25%时会出现很明显的差别（这里使用的是chrome浏览器，其他浏览器如果没有这种状况，可以在浏览器中手动去改动字体大小，在增大字体的情况下可以看出类似的情况发生）具体如下图

可以看到使用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

下面通过一个例子进行具体的解释　

    
    
    
    
    
    
        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 代码如下

    
    
    
    
    
    
        aaa son1

        aaa son2

    

结果图为：

因为.son1 中的单位全改为rem，参考对象为html字体的大小即为16px，所以.son1字体大小为2*16=32px  ，宽度和高度为5*16=80px，边框为1px

以上是“css长度单位之em的使用示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！