一直以来认为'em'是相对于父元素的字体大小.

　　直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!!

　　在CSS官网对em的解释实例是: a. h1{line-height:1.2em;} →使用的行高为h1自身的font-size*1.2;    b.h1{font-size:1.2em;}→h1的font-size为h1继承来的font-size*1.2;下面我们通过具体例子来验证一下.
 　　　　

　　<!DOCTYPE html>

　　<html lang="en">

　　<head>

　　　　　<meta charset="UTF-8">

　　　　　<title>Document</title>

　　</head>

　　<style>
　　　　p{
　　　　　　width: 20em; //20*继承父元素的fontSize;(图1)
　　　　　}

　　　　p{
　　　　　　width: 20em;

　　　　　　font-size:15px;//此时的宽度为20*15;(图二)
　　　　　}
　　</style>

　　<body>

　　　　　　<p>我是用em定义的字体大小</p>

　　</body>

　　</html>

　　　　　　　　　　　　图一:

　　　　　　　　　　　　图二:

　　　　

　　综上:'em'就是自身的字体大小即:fontSize.如果自身指定的fontSize=20px;那么1em =20px;如果自身没有指定,则是继承来的fontSize.

对CSS尺寸单位'em'的长期误解的更多相关文章

  1. 关于对CSS尺寸单位'em'的长期误解

    一直以来认为'em'是相对于父元素的字体大小. 直到今天学习移动WEB开发,重新复习css的尺寸大小时,惊奇发现:对em深深的误解了!!! 在CSS官网对em的解释实例是: a. h1{line-he ...

  2. CSS尺寸单位 % px em rem 详解

    在CSS中,尺寸单位分为两类:相对长度单位和绝对长度单位.相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位.字体相对单位有:em.ex.ch.rem:视窗相对单位有:vw.vh.v ...

  3. css中单位em和rem

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

  4. 尺寸单位em,rem,vh,vw

    这几天做demo,看了网上教程有用到尺寸单位vh,vw, 这些单位不是很熟悉,所以上网上找了些资料来认识了这些不认识的单位 1.em 在做手机端的时候经常会用到的做字体的尺寸单位 说白了 em就相当于 ...

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

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

  6. 学习CSS了解单位em和px的区别

    这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...

  7. CSS尺寸和字体单位-em、px还是%

    在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置, ...

  8. css大小单位px em rem的转换和详解

    css大小单位px em rem的转换和详解 PX特点1. IE无法调整那些使用px作为单位的字体大小:2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位:3. Firefox能 ...

  9. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em，rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

随机推荐

  1. uva1439 Exclusive Access 2

    感觉这道题读题有点难..似乎和现实联系的比较密切1.每个process的两个资源可以顺序反一下2.p->q,q->s不可以同时进行 p->q,p->s可以 输出最长等待链输出每 ...

  2. tree iview treeData json数据 添加 selected 数据 要进行vue.set 进行响应式添加

    tree iview treeData json数据 添加 selected 数据 要进行vue.set 进行响应式添加

  3. 搜索 || DFS || POJ 1321 棋盘问题

    棋盘上#可以放,.不可以放,每行每列只能放一个 *解法:类似八皇后问题 dfs+回溯,考虑每一行和每一列 [[[[dfs的样子]]]]最前面写达到目标状态or不能走下去了 然后return #incl ...

  4. Perl: hash散列转换为Json报错集， perl.c,v $$Revision: 4.0.1.8 $$Date: 1993/02/05 19:39:30 $

    bash-2.03$ ./u_json.pl Can't locate object method "encode" via package "JSON" at ...

  5. 《3+1团队》【Alpha】Scrum meeting 1

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 团队名称 3+1团队 团队博客地址 https://home.cnblogs.com/u/3-1group ...

  6. Spring上传报错413

    SpringMVC上传文件报错413 笔者今天工作时,运维的同事反馈我们上线不久的项目上传文件过大时,总是提示上传失败. 场景重现一下,发现报错信息显示413:Request entity too l ...

  7. 教你学会Linux/Unix下的vi文本编辑器

    vi编辑器是Unix/Linux系统管理员必须学会使用的编辑器.看了不少关于vi的资料,终于得到这个总结. 首先,记住vi编辑器的两个模式:1.命令模式 2.编辑模式. 在一个UNIX/Linux的s ...

  8. 如何移除浏览器一启动就打开lunchpage.org

    lunchpage.org 就是一个劫持网站.症状就是你打开你电脑上的任何浏览器都会重定向到一个广告页面.这个很烦! 解决方法: 1. 安装 Zemana AntiMalware 便携版. 2. 打开 ...

  9. 任务备忘（已经完成）：用python写一个格式化xml字符串的程序

    功能: 1.将xml中多余的空格,换行符去掉,让xml字符串变成一行. 2.将xml中添加缩进,使用print能正确打印添加缩进后的字符串. 思路: 采用正则表达式来判断xml中字符串的类型: 1.文 ...

  10. (7) 将tomcat HTTP连接器启动在80端口(jsvc使用详解)

    让tomcat在80端口上运行 法一: 修改连接器的端口8080为80 <Connector port="8080" protocol="HTTP/1.1" ...