css中em相对单位怎么使用

本篇内容介绍了“css中em相对单位怎么使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

目前创新互联建站已为近1000家的企业提供了网站建设、域名、网站空间网站托管、企业网站设计、广东网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

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倍”(类比于设置font-size:2em)。这个时候水果店老板估计就要崩溃了,他到底要给你装多少橘子呢?

为了避免这种事情发生,在你指定数量的时候如果使用相对单位,那这个单位必定不能相对于你此刻所指定的数量。你可以对老板这样说:“我要的数量是上一个顾客买的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会怎么样呢?它没有父元素了啊!没关系,对于inheritedproperties(其中就包括font-size),在根元素上的默认值为initial,对于大部分浏览器,font-size的initial值就是16px。因此在设置根元素上的font-size时,它的值还是16px,1em也就等于16px

Document

“css中em相对单位怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


文章标题:css中em相对单位怎么使用
文章网址:http://bzwzjz.com/article/gopjpj.html
Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计公司 成都网站建设 网站建设公司 成都营销网站制作 成都定制网站建设 网站设计制作报价 重庆网站建设 教育网站设计方案 网站建设开发 重庆网站建设 网站建设公司 营销型网站建设 成都企业网站制作 达州网站设计 成都网站建设公司 成都网站建设 商城网站建设 手机网站制作设计 成都网站设计 成都网站建设公司 盐亭网站设计 成都网站设计