被误解的 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 = 3

误解的 em 单位新手入门

em 单位往往被认为是相对于父元素的 font-size 大小来进行计算的。例如一个元素的父元素设置了如下的 font-size:

被误解的 em 单位新手入门_单位入门基础知识

body {
    font-size:20px;
}

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

div {
    font-size:1.5em;
}

那么 div 元素的 font-size = 20 * 1.5 = 30px.
被误解的 em 单位新手入门_单位入门基础知识

实际情况

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

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

被误解的 em 单位新手入门_单位入门基础知识

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

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

被误解的 em 单位新手入门_单位入门基础知识

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

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

应该改成:

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

来自:https://segmentfault.com/a/1190000019412716

海计划公众号
(0)
上一篇 2020/03/30 07:14
下一篇 2020/03/30 07:14

您可能感兴趣的内容

  • JS中三个点(…)入门基础_运算零基础入门

    我们在看js代码时经常会出现(…)三个点的东西,它究竟是什么意思?又有何用处?下面我就给大家分享一下三个点的那些事什么意思?三个点(…)真名叫扩展运算符,是在ES6中新增加的内容,它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开;还可以在构造字面量对象时将对象表达式按照key-value的方式展开字面量一般指[1,2,3]或者

    2020/03/20
  • 优秀工程师要具备哪些能力?使用帮助_工程师小白帮助

    平庸的人总是相似,优秀的人却各不相同。在这各不相同的特性里,掩藏着怎样的共性?据说这十大能力,是通往优秀工程师之路的必备资质。预备工作的能力常言道“一日之计在于晨”,一天的工作效率,其实取决于早晨的工作状态。我们的工程师每天早晨来到公司,都会这么做: 主动与身边的同事打招呼,面带微笑。清理自己的办公桌,保持干净整洁。打开电脑,顺便可以去倒一杯水。打开钉钉、微

    2020/03/29
  • css中1px等于多少rem?入门基础_rem基础入门

    rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。rem 和 em 一样,也是一个相对大小的值,它是相对于根元素 。比如假设,我们设置html的字体大小的值为html{font-size: 87.5%;}

    2020/03/20
  • moon小白帮助_一个从Vue获得灵感的 UI 框架

    moon小白帮助 官方网址:https://kbrsh.github.io/moon GitHub:https://github.com/kbrsh/moon 简介描述:一个从Vu…

    2020/03/06
  • chaijs小白知识一个行为驱动开发/测试驱动开发的断言库

    chaijs基础入门 官方网址:http://chaijs.com GitHub:https://github.com/chaijs/chai 简介描述:一个行为驱动开发/测试驱动…

    2020/03/05
  • FreeImages指南教程_图片/图库素材搜索引擎

    FreeImages小白入门 官方网址:https://cn.freeimages.com/ 简介描述:图片/图库素材搜索引擎 FreeImages.com is the sour…

    2020/03/06
  • 听说你很懂this,是真的吗?攻略教程_this指南教程

    this关键字是JavaScript中最复杂的机制之一,是一个特别的关键字,被自动定义在所有函数的作用域中,但是相信很多JvaScript开发者并不是非常清楚它究竟指向的是什么。听说你很懂this,是真的吗?请先回答第一个问题:如何准确判断this指向的是什么?【面试的高频问题】再看一道题,控制台打印出来的值是什么?【浏览器运行环境】var number =

    2020/03/24
  • ZenFotomatic使用攻略_免费产品图片去背景工具

    ZenFotomatic使用攻略 官方网址:https://www.zenfotomatic.com/ 简介描述:免费产品图片去背景工具 “ZenFotomatic”是一个提供在线…

    2020/03/11
  • 组件化的概念/特性/优点,Vue组件的使用攻略教程_vue小白知识

    组件化的概念
    Web 中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用,页面就是有一个个类似这样的部分组成,比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件自由组合形成功能完善的界面,当不需要某个组件,或者想要替换

    2020/04/05
  • ColorReview指南教程_在线前景和背景颜色对比

    ColorReview指南教程 官方网址:https://color.review/ 简介描述:在线前景和背景颜色对比 ColorReview是一款可以针对设计师颜色设计的预览工具…

    2020/03/10
  • css父元素透明度(opacity)对子元素的影响菜鸟攻略_元素基础入门

    首先子元素会继承父元素的透明度:设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。其次子元素的透明度是基于父元素的透明度计算的:设置父元素opacity:0.5,即使设置子元素opacity:1,子元素的opacity:1也是在父元素的opacity:0.5的基础上设置的,因此子元素的

    2020/03/23
  • 网站建设中常见的一些问题?菜鸟教程网_网站小白帮助

    在互联网的时代中,网站建设其实是一个非常常见的事情了,几乎每一家企业都希望在互联网上,能够留下属于自己一个足迹,想要拥有一个可以展示自家产品的平台,但是在网站建设的过程中,真的有把每一个过程都做的很好嘛?是达到了自己想要的效果嘛?下面就为一些新手分享一下在网站建中比较常见的问题。问题一:域名问题域名的选择上,就是一个比较关键的问题,我们来看一下域名的权重排序

    2020/03/24
  • 远程协作尝试,Github远程协作入门基础知识_github指南攻略

    远程协作是一个听起来很酷的词,就像谈恋爱一样,听起来总是觉得它和浪漫一词相关,但实际进行起来却由于各种原因感觉不是那么浪漫。那么,我们这次就来分享一下远程协作过程中的浪漫和苦闷,以及我们在两者之间的取舍。远程协作,我们也把它叫做“云办公”,好处是自然可以想象:节省办公室租金( HR 曾好几次跟我说公司办公室位置不够了,把我从这个地方赶到那个地方。)工作环境自

    2020/04/06
  • nw.js小白基础轻量级桌面应用开发的捷径

    nw.js基础入门 官方网址:http://nwjs.io/ GitHub:https://github.com/tza17313/nw.js-demo 简介描述:轻量级桌面应用开…

    2020/03/05
  • apache反向代理出现502调整小白教程_apache菜鸟攻略

    1、问题描述:项目上线后,会在接口调用时客户端出现502异常,而服务端则对该此请求作出处理。2、问题原因:经过排查后得知是由于请求并发量大,造成超过请求超时间,但是apache中队列已经加载到请求信息,所有会对请求作出处理。3、解决方式:通过配置 timeout=1200000 Keepalive=On 这俩个参数,加大apache请求超时时间,且保持连

    2020/03/31
  • 可以用什么工具编写javascript?小白入门_工具入门基础知识

    现在已经不是以前那个掌握一个IDE就能“一招鲜吃遍天”的时代了。激烈的竞争以及蔓延到现在的集成开发环境。基于IDE是用于创建和部署应用程序的强大客户端应用程序,下面我们要分享的就是对于很多网页设计师和开发人员而言,最好的JavaScript 开发工具。一些用来编写JavaScript的工具及其简介:1、SpketSpket IDE是一款功能强大的工具包,支持

    2020/03/24