相关链接

em何意?

它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;

1em=元素中文本的1个垂直高度

如果元素中文本的大小为16px,那么1em=16px;如果元素中文本大小为20px,那么1em==20px

PS:相对长度,相对于当前应用内文本的字体尺寸。

字体单位使用em能支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明font-size=62.5%,这就使em值变为 16px62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了*。

em的特点

em的值不固定

em会继续父级元素的字体大小

举个例子

例一,

默认情况下1em=16px,如何改变这个默认值呢?

body {

font-size: 24px;//修改font-size就可以更改默认值

width: 10em; /* 10em = 24px * 10 = 240px */

}

例二,

body {

font-size: 12px;

}

div {

/* 该元素没有设置font-size,因此继承了父元素的font-size: 12px; */

width: 10em; /* 10em = 12px * 10 = 120px */

}

例三,

body {

font-size: 12px;

}

//子元素设置了font-size,但是单位不一样怎么算呢?

div {

font-size: 2em; /* 2em = 12px * 2 = 24px */

width: 10em; /* 10em = 24px * 10 = 240px */

}

注意:

如果元素自身设置了font-size,那么参考文本大小就是自身的font-size大小

如果元素自身没有设置font-size,那么参考文本大小就是父元素的font-size大小

为元素设置font-size时,如果使用em作为单位,那么1em=父元素的font-size大小

html5里面em是什么单位,HTML5中单位em的理解相关推荐

  1. em表示什么长度单位_css中单位em和rem的区别

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

  2. html中的em等于多少像素,CSS中的em运用详解,1em等于多少像素?

    使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...

  3. css中em怎么不倾斜,css中的em用法

    px:是相对于浏览器分辨率的一个度量单位 em是一个相对于父元素的font-size的大小的一个度量单位 1.浏览器的默认字体大小是16px 2.如果元素自身没有设置字体大小,那么元素自身上的所有属性 ...

  4. HTML中将px转换为em的语法,在JavaScript中转换EM为PX(并获得默认字体大小)

    CommunityChannel72提出了一个问题:Converting em to px in Javascript (and getting default font size),或许与您遇到的问 ...

  5. html中mark标记,html5 mark标签是什么意思?html5 mark标签的作用又是什么?

    本篇文章为大家介绍的是html5中的mark标签,文中介绍了包括html5 mark标签中的定义和使用的一些说明,还有,关于html5 mark标签的一些作用和实例代码,mark标签使用简单,就是使文 ...

  6. css中单位em和rem

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

  7. [html] 说说你对HTML5中pattern属性的理解

    [html] 说说你对HTML5中pattern属性的理解 好像是判断input在输入时按下tab键跳转到下一个input的优先级 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...

  8. css font size 单位,css中font-size的单位总结:px、em、pt

    px:基于像素的单位.像素是一种有用的单位,因为在任何媒体上都可以保证一个像素的差别确实是可见的. em :一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是 ...

  9. 20、CSS中单位:【px和%】【em和rem】【vw|vh|vmin|vmax】的区别

    CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响. % (percentage) 是相对单位,代表元素大小相对于其父元素或 ...

  10. 详解css中的em单位

    文章目录 详解CSS中的em单位 解释 Examp-01 源码 Example-02 源码: 详解CSS中的em单位 css中的长度单位有很多,可谓五花八门,而下面本篇文章就来给大家介绍一下em单位. ...

最新文章

  1. 使用SD-WAN策略与传统路由器的OFFICE 365配置
  2. OpenCV形态学变换函数morphologyEx()黑帽运算的使用
  3. 利用有名管道实现进程间的通信
  4. mongodb 索引1
  5. Candy leetcode java
  6. 机器学习(聚类六)——层次聚类
  7. 一位女性程序员的职业规划
  8. 五点差分法 matlab,【五点|五点差分法(matlab)解椭圆型偏微分方程】
  9. catkin_make 编译包无效(没反应)
  10. 附下载 | 图解密评联委会《商用密码应用安全性评估FAQ(第二版)》
  11. 深度技术GhostXP专业版V9.0之初体验
  12. 【添坑】高博ORB_SLAM
  13. Android 系统属性读取和设置详解
  14. 简单几步实现网络音乐播放器(Qt版百度FM)
  15. 关于Compound Word Transformer论文代码的环境配置
  16. Go 每日一库之 gorilla/securecookie
  17. 高仿“饿了么”Vue项目(一)
  18. 每天有2800万人在看片
  19. 现在的access数据库有2种后缀格式:.mdb和.accdb,区别是.mdb是access2003版及以前,.accdb是2007版access的格式
  20. 烟酰胺与nmn哪个好,nmn烟酰胺单核苷酸的不可替代性,看完醒悟

热门文章

  1. Jetty和Tomcat
  2. (转) Oracle性能优化-读懂执行计划
  3. 漫谈 | “黎曼猜想”和区块链加密算法到底有什么关系?
  4. hadoop学习笔记-目录
  5. 关于docker环境下mysql的使用相关
  6. 浅谈Solr和ElasticSearch建索引性能优化策略
  7. datastage 作业查找脚本
  8. AIX操作系统基本命令
  9. 想要写好的程序应该远离计算机
  10. 【转】桌面快捷方式不见了的解决办法