CSS单位em是相对于父元素还是当前元素的字体大小？

yvonne 发布于2019-08-29 17:03 / 1120人阅读

摘要：这个时候水果店老板估计就要崩溃了，他到底要给你装多少橘子呢为了避免这种事情发生，在你指定数量的时候如果使用相对单位，那这个单位必定不能相对于你此刻所指定的数量。

em是CSS中一个比较常用的相对单位，因此有必要注意一些坑点。

1em等于当前元素的字体大小，除非你在设置font-size

有很多文章说1em是等于父元素的字体大小！这种说法实际上是不准确的。看以下例子：





    
    
    
    Document

会被padding-bottom撑开，而padding-bottom的高度是64px，而不是32px！这证明了1em等于当前元素的字体大小（只有一个例外，下面会讲）。

字体大小和长度有什么关系呢？字体不是一个方块吗？实际上，字体大小被定义为M的宽度。

为什么有人误认为1em等于父元素的字体大小呢？这是因为如果在设置font-size的时候使用em单位，此时font-size还是默认值inherit，因此此时1em还等于父元素的字体大小。这是在设置font-size时才有的特例！这个特例很好理解，毕竟我正在设置当前元素的字体大小呢！总不能使用此刻正在设置的字体大小作为单位吧！这不是悖论吗！

举个例子，如果这个悖论真的发生了，就会出现以下情况：水果店老板对你说：“你要多少斤橘子，我给你装起来”，而你却对老板说：“我要的数量是我最终要的数量的2倍”。这个时候水果店老板估计就要崩溃了，他到底要给你装多少橘子呢？
为了避免这种事情发生，在你指定数量的时候如果使用相对单位，那这个单位必定不能相对于你此刻所指定的数量。你可以对老板这样说：“我要的数量是上一个顾客买的2倍”（类比于设置font-size: 2em）。当你买完橘子以后，又可以对老板这样说：“我还要一些苹果，数量是刚才买的橘子的2倍”（类比于设置padding-bottom: 2em）。

除了这个特例以外，当设置其他css属性的时候，1em就等于当前元素的字体大小。

在上面的例子中，设置font-size的时候使用em，就能证明这个特例的存在：





    
    
    
    Document

最终高度依然是64px，因为在设置font-size的时候，1em == 16px；在设置padding-bottom的时候，1em 就等于 32px 了。

如果在根元素上的font-size使用em会怎么样呢？它没有父元素了啊！没关系，对于inherited properties（其中就包括font-size），在根元素上的默认值为initial，对于大部分浏览器，font-size的initial值就是16px。因此在设置根元素上的font-size时，它的值还是16px，1em也就等于16px。





    
    
    
    Document

参考资料

https://developer.mozilla.org...

https://www.w3cplus.com/css/r...

云服务器 GPU云服务器 js取元素相对位置元素大小 css元素 js取原生当前元素

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

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

<em>CSSem> 单位

摘要：概览中的长度单位有很多，觉得有必要整理备忘。单位大体分为两大类绝对单位，不会因为其他元素的尺寸变化而变化。如果想使用显示窗口的宽度或高度而不是父元素的宽度将会怎么样这正是和单位所提供的。和现代浏览器都支持这两个单位。概览 CSS中的长度单位有很多，觉得有必要整理备忘。网上介绍的也比较多和全，详见参考资料。单位大体分为两大类：绝对单位，不会因为其他元素的尺寸变化而变化。相对...

ARGUS 2019-08-28 18:23 评论0 收藏0
<em>CSSem>的一些单位

摘要：你确定，是相对于父元素的大小在我们写样式修饰的时候，长度单位像是我们常用的。那么它们有什么不同的地方呢像素。你确定，EM是相对于父元素的大小？在我们写样式修饰的时候，长度单位像PX、EM、REM是我们常用的。那么它们有什么不同的地方呢？ 1、PX 像素。相对长度单位，相对于显示器的屏幕分辨率的大小 IE无法调整那些使用px作为单位的字体大小国外大部分的网站能够调整的原因在于其使...

andot 2019-08-30 11:21 评论0 收藏0
关于<em>CSSem>中的字体尺寸设置

摘要：常用单位在中可以用很多不同的方式来设定字体的尺寸。当你为一个元素添加单位时，应当考虑到所有父元素的字体尺寸。例宽度是中新提出的一个单位，通过宽度来计算字体尺寸。个人翻译，转载请注明出处英文原文：CSS Font Sizing 写在前面上一篇文章如何做好移动端的响应式设计：Viewport控制讨论到了CSS像素，于是我决定研究一下如何用不同的方式来在CSS中设定字体...

mcterry 2019-08-28 18:09 评论0 收藏0
自适应网页设计

摘要：一允许网页宽度自动调整首先，在网页代码的头部，加入一行标签。四选择加载自适应网页设计的核心，就是引入的模块。参考自自适应网页设计基于等视区相对单位的响应式排版和布局一、允许网页宽度自动调整首先，在网页代码的头部，加入一行viewport标签。　　 viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始...

Euphoria 2019-08-29 11:26 评论0 收藏0
自适应网页设计

摘要：一允许网页宽度自动调整首先，在网页代码的头部，加入一行标签。四选择加载自适应网页设计的核心，就是引入的模块。参考自自适应网页设计基于等视区相对单位的响应式排版和布局一、允许网页宽度自动调整首先，在网页代码的头部，加入一行viewport标签。　　 viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始...

wenshi11019 2019-08-01 15:51 评论0 收藏0