px:是相对于浏览器分辨率的一个度量单位

em是一个相对于父元素的font-size的大小的一个度量单位

1、浏览器的默认字体大小是16px

2、如果元素自身没有设置字体大小,那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值,都是相对于父元素的font-size属性来计算的,公式为:

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

3、如果元素设置了字体大小,那么元素的字体大小的转换依旧按第二条公式计算(相对于父元素的font-size计算的),也就是下面的:

1 ÷ 父元素的font-size × 需要转换的像素值 = em值

但是该元素的其他属性,如“border、width、height、padding、margin、line-height”,则需要相对于自身的font-size计算,

计算公式:

1 ÷ 元素自身的font-size × 需要转换的像素值 = em值

示例:

第一个div中,设置了font-size,所以div中width设置为10em是相对于自身的font-size来计算的。而div的font-size是相对于父元素的font-size计算的

css中的em用法的更多相关文章

  1. css中单位em和rem

    一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...

  2. 一个CSS中Z-index的用法

    一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...

  3. css中的em 简单教程 -- 转

    先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...

  4. CSS学习笔记(9)--详解CSS中:nth-child的用法

    详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...

  5. CSS中的EM属性之弹性布局

    这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...

  6. 详解CSS中:nth-child的用法

    前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...

  7. css中px,em,rem,rpx的区别

    今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...

  8. css中单位em和rem的区别

    在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...

  9. 简谈CSS 中的 em,rem,px,%

    在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...

随机推荐

  1. 浅析前端开发中的 MVC/MVP/MVVM 模式

    MVC,MVP和MVVM都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式.不同于设计模式(Design Pattern),只是为了解决一类 ...

  2. P1045

    问题 A: P1045 时间限制: 1 Sec  内存限制: 128 MB提交: 145  解决: 127[提交][状态][讨论版] 题目描述 题目很简单,给出N个数字,不改变它们的相对位置,在中间加 ...

  3. S2_OOP第一章

    面向对象设计的过程就是抽象的过程 步骤: 第一步:发现类 第二步:发现类的属性 第三步:发现类的方法 抽象是遵循的原则 属性和方法的设置是为了解决业务问题 关注主要属性和方法 如果没有必要,不增加额外 ...

  4. ES中const

      前  言 EScript 上一次总结了,ES中let和var的区别,今天在带大家了解另一个声明关键词:const. const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改 ...

  5. FPGA与PCI-E

    从并行到串行: PCI Express(又称PCIe)是一种高性能.高带宽串行通讯互连标准,取代了基于总线的通信架构,如:PCI.PCI Extended (PCI-X) 以及加速图形端口(AGP). ...

  6. Python使用Scrapy爬虫框架全站爬取图片并保存本地(妹子图)

    大家可以在Github上clone全部源码. Github:https://github.com/williamzxl/Scrapy_CrawlMeiziTu Scrapy官方文档:http://sc ...

  7. python 发送邮件,未完

    def send_mail(): try: print "send mail..." # handle = smtplib.SMTP('smtp.163.com', 25) # h ...

  8. Lucene介绍与入门使用

    Lucene简介 Lucene是apache软件基金会4 jakarta项目组的一个子项目,是一个开放源代码的全文检索引擎工具包,但它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整 ...

  9. 组件 layui 常用控件下拉框的应用

    下拉框的显示样式: 针对下拉框的绑定等操作时,在最后务必调用一次 form.render(); 1.基本定义: <div class="layui-form-item"> ...

  10. IOS系统配置FFMEPG

    在FFMPEG的官网上可以找到标准的配置文档...http://ffmpeg.org/trac/ffmpeg/wiki/MacOSXCompilationGuide 在开始前确保安装了XCODE而且也 ...