css中em是相对于父元素还是当前元素的大小?(代码示例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于css中em是相对于父元素还是当前元素的大小?(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

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

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

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

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         body {             font-size: 16px;         }         div {             font-size: 32px;             padding-bottom: 2em;             background-color: aquamarine;         }     </style> </head>  <body>     <div></div> </body> </html>

<div>会被padding-bottom撑开,而padding-bottom的高度是64px,而不是32px!这证明了1em等于当前元素的字体大小(只有一个例外,下面会讲)。

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

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

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

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

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

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         body {             font-size: 16px;         }         div {             font-size: 2em;  /* 仅仅这一行改变了! */             padding-bottom: 2em;             background-color: aquamarine;         }     </style> </head> <body>     <div></div> </body> </html>

最终高度依然是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

<!DOCTYPE html> <html>  <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         html {             /* 2*16px=32px */             font-size: 2em;         }         div {             /* 2*32px=64px */             font-size: 2em;             /* 2*64px=128px */             padding-bottom: 2em;             background-color: aquamarine;         }     </style> </head>  <body>     <div></div> </body> </html>
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » css中em是相对于父元素还是当前元素的大小?(代码示例)

发表评论

提供最优质的资源集合

立即查看 了解详情