css中的em用法
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用法的更多相关文章
- css中单位em和rem
一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...
- 一个CSS中Z-index的用法
一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性 大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另 ...
- css中的em 简单教程 -- 转
先附上原作的地址: https://www.w3cplus.com/css/px-to-em 习惯性的复制一遍~~~~ -------------------------------我是分界线---- ...
- CSS学习笔记(9)--详解CSS中:nth-child的用法
详解CSS中:nth-child的用法 前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实 ...
- CSS中的EM属性之弹性布局
这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局,从而学习其如何计算?又是如何使用“em”对层进行弹性扩展?又是如何扩展文本和图像等内容?下在我们就一起带着这些问题开始今天的“em”之行. ...
- 详解CSS中:nth-child的用法
前端的哥们想必都接触过css中一个神奇的玩意,可以轻松选取你想要的标签并给与修改添加样式,是不是很给力,它就是“:nth-child”. 下面我将用几个典型的实例来给大家讲解:nth-child的实际 ...
- css中px,em,rem,rpx的区别
今天看到一个面试题为 px,em的区别,为了更好地让读者区分css的长度单位,我总结下css中常用的长度单位: px,em,rem,rpx 像素px是我们在定义CSS中经常用到的尺寸大小单位,而em在 ...
- css中单位em和rem的区别
在css中单位长度用的最多的是px.em.rem,这三个的区别是: px是固定的像素,一旦设置了就无法因为适应页面大小而改变. em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定 ...
- 简谈CSS 中的 em,rem,px,%
在实际工作中,可能我们用的比较多的是‘%’ 和 px,但是我们也经常看到很多网站和css框架里用的是em 或rem.而‘%’ 和px已经都是比较常见或者说是常用.但是em 和rem 却鲜有使用,一直以 ...
随机推荐
- JSP内置对象的实验报告,页面登陆设计
JSP内置对象的实验报告 一.实验目的: 本实验的目的是让学生掌握怎样在JSP中使用内置对象request.page.response等. 二.实验要求: 编写四个JSP 页面login.jsp.Re ...
- Spring 具名参数NamedParameterJdbcTemplate
具名参数: 具名参数:SQL 按名称(以冒号开头)而不是按位置进行指定. 具名参数更易于维护, 也提升了可读性. 具名参数由框架类在运行时用占位符取代 我们之前一直是用JDBCTemplate 进行 ...
- 用ES6巧妙的解决传统面试中的算法小问题!
最近自己也在准备面试,在复习算法的时候,机智的用了一波ES6.一起来瞧瞧吧! 1.数组的去重 var arr=str.split(''); for(var i=0;i<arr.length-1; ...
- VB.NET 打开窗体后关闭自己
第一:要实例化打开的窗体 Dim bb As New frm_Main 第二:打开窗体 show 第三:释放自身 Finalize() '赋值另一窗体的控件值,先实例化,再进行操作 Dim bb ...
- ocs的沟通平台
Microsoft Office Communications Server 2007 R2 简称:OCS准时准确地联系人员以及管理信息过载根据人员的状态与其联系,然后单击最佳方式与其通信:通过电子邮 ...
- 程序员 各种PDF格式电子书--免费网盘资源
Java <设计模式之禅(完整高清版)> 链接:http://pan.baidu.com/s/1bo7noMb 密码:5kve <重构_改善既有代码的设计> 链接:http: ...
- HDU1223 Order Count 动态规划 组合数
动态规划+组合数+大数 #include<cstdio> #include<cstdlib> #include<iostream> #include<algo ...
- Android Annotations(2)
AndroidAnnotations是一个开源框架,旨在加快Android开发的效率.通过使用它开放出来的注解api,你几乎可以使用在任何地方, 大大的减少了无关痛痒的代码量,让开发者能够抽身其外,有 ...
- Golang:使用 httprouter 构建 API 服务器
https://medium.com/@gauravsingharoy/build-your-first-api-server-with-httprouter-in-golang-732b7b01f6 ...
- UEFI启动视频详解:启动分析+N项操作实例
============================================================= ※※※※最给力的视频解说※※※※ 2011hiboy全部共享资料:立刻去 ...