CSS长度单位之em介绍

青灯夜游

发布时间：2018-10-12 17:36:18

3731人浏览过

来源于博客园

转载

本文给大家带来css长度单位之em介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

一、为什么使用em

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

em主要是应用于弹性布局，下面给出一个小栗子说明em的强大之处

Document

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）如果元素的字体大小是自己设置的

赶鸟企业网站管理系统2.0

赶鸟企业网站管理系统 2.0，是在已往系统的基础上经过重新设计和架构形成的。系统以任务为主导和以通用企业网站管理为目标而构建，前台页面精美漂亮、速度超快，后台功能强大、简单易用。整套系统完整无错，是企业建站之必备良品。功能介绍：基本设置：网站信息、联系方式、联系我们等；产品管理：分类管理、产品管理；新闻管理：分类管理、新闻管理；人才招聘：发布人才招聘信息，访客直接应聘职位；留言反馈：客户留言信息反

下载

当前元素的字体大小的em值=当前元素字体大小px/父元素字体大小px

当前元素需要的其他em值=当前元素的px值/元素自身的字体大小px

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

Document

aaa son1

aaa son2

打开浏览器中显示的.son1盒子的盒子模型，以及网页结果图具体入下