被误解的 em 单位

BlackFlagBin 发布于2019-08-30 11:06 / 990人阅读

摘要：被误解的单位单位往往被认为是相对于父元素的大小来进行计算的例如一个元素的父元素设置了如下的而其中的设置了设置了那么元素的实际情况我们都知道是相对单位但是实际上单位相对的是自身的大小我们可以尝试一下倍于自身的利用这一点我们来

被误解的 em 单位

em 单位往往被认为是相对于父元素的 font-size 大小来进行计算的.

例如一个元素的父元素设置了如下的 font-size:

body {
    font-size:20px;
}

而其中的 div 设置了 font-size 设置了 1.5em :

div {
    font-size:1.5em;
}

那么 div 元素的 font-size = 20 * 1.5 = 30px.

实际情况

我们都知道 em 是相对单位, 但是实际上 em 单位相对的是自身的 font-size 大小, 我们可以尝试一下:

div {
    font-size:20px;
    margin:2em; /* 2倍于自身的 font-size */
}

利用这一点, 我们来打破经典的 em 是相对于父元素大小的观点:

body {
    font-size:40px;
}
div {
    font-size:20px;
    margin:2em; /* 我可没有相对于 body 的 font-size 来进行计算 */
}

如果继承父元素的 font-size 的大小, div 的 margin 计算值是 60px 而不是最后的 40px , 显然这个值是根据 div 本身的 font-size 来进行计算的.

所以在此之前我们所了解的:

em 单位是相对于父元素的 font-size 来计算的

应该改成:

em 单位是相对于元素的 font-size 来计算的, 但是不要忘记 font-size 会继承 font-size 大小

而日常开发中 em 单位常见于字体单位的而不是其他属性的单位, 所以无法看出 em 实际上是相对于元素的 font-size , 因为 font-size 直接继承了父元素的大小, 所以 em 的误解也就一直存在了.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114773.html

rem与em的使用和区别详解

摘要：和，在自适应制作中最常用的单位。主要区别和单位之间的区别是浏览器根据谁来转化成值理解这种差异是决定何时使用哪个单元的关键。事实上，根据标准，它们是相对于使用单位的元素的字体大小。父元素的字体大小可以影响值，但这种情况的发生，纯粹是因为继承。 rem和em，在自适应制作中最常用的单位。rem是基于html元素的字体大小来决定，而em则根据使用它的元素的大小决定。二者都是灵活、可扩展的单位...

only_do 2019-08-23 13:53 评论0 收藏0
【基础】EM 还是 REM？这是一个问题！

摘要：但问题是究竟该用还是呢关于这个问题一直存在比较大的争议。上述现象的出现，是因为是相对于当前元素字体的大小。什么是表示，它是相对于根元素的长度单位。还是在项目开发中究竟是选用还是一直以来争议不断。这就是前述规则中的第一条规则。简言应用象EM 和 REM这种相对长度单位进行页面排版是WEB开发中的最佳实践。在页面排版中较好应用EM 和 REM，根据设备尺寸缩放显示元素的大小。这就使得组...

lk20150415 2019-08-29 15:07 评论0 收藏0
css中的尺寸和单位

摘要：前言本文主要介绍的尺寸和单位，专门查了加上自己的一些理解。比如等属性的类型分为绝对单位和相对单位相对单位相对单位代表以其他距离为尺寸的一种单位，包括，，，，。前言本文主要介绍css的尺寸和单位，专门查了mdn, 加上自己的一些理解。本文参考mdn 类型 length表示距离尺寸的一种css数据格式,它由数值+单位组成，如果数值为0，单位可以省略。比如width, height, m...

noONE 2019-08-30 15:55 评论0 收藏0
css中的尺寸和单位

摘要：前言本文主要介绍的尺寸和单位，专门查了加上自己的一些理解。比如等属性的类型分为绝对单位和相对单位相对单位相对单位代表以其他距离为尺寸的一种单位，包括，，，，。前言本文主要介绍css的尺寸和单位，专门查了mdn, 加上自己的一些理解。本文参考mdn 类型 length表示距离尺寸的一种css数据格式,它由数值+单位组成，如果数值为0，单位可以省略。比如width, height, m...

cod7ce 2019-08-23 14:53 评论0 收藏0
css中的尺寸和单位

摘要：前言本文主要介绍的尺寸和单位，专门查了加上自己的一些理解。比如等属性的类型分为绝对单位和相对单位相对单位相对单位代表以其他距离为尺寸的一种单位，包括，，，，。前言本文主要介绍css的尺寸和单位，专门查了mdn, 加上自己的一些理解。本文参考mdn 类型 length表示距离尺寸的一种css数据格式,它由数值+单位组成，如果数值为0，单位可以省略。比如width, height, m...

Yujiaao 2019-08-02 14:08 评论0 收藏0