一直以来认为'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. Python array,list,dataframe索引切片操作 2016年07月19日——智浪文档

    array,list,dataframe索引切片操作 2016年07月19日——智浪文档 list,一维,二维array,datafrme,loc.iloc.ix的简单探讨 Numpy数组的索引和切片 ...

  2. 作业3（PSP表格）

                            PSP2.1 Personal Software Process Stages Time(min) Planning 计划 11 Estimate 估计 ...

  3. java语言程序设计(一)-2

    (一)jdk安装及环境变量配置 1.jdk下载 下载地址http://www.oracle.com/technetwork/java/javase/downloads/index.html,下载SE标 ...

  4. 使用Myeclipse插件将wsdl生成java客户端代码

    使用环境:MyEclipse9.0 本教程使用Myeclipse内置插件生成java代码,网上说这是xfire插件,不管怎样,生成和调用客户端代码都十分简单. 1.在项目上右键,选择New->O ...

  5. 如何通过JDBC访问数据库

    Java数据库连接(JDBC)用与在Java程序中实现数据库操作功能,它提供了执行SQL语句.访问各种数据库的方法,并为各种不同的数据库提供统一的操作接口,java.sql包中包含了JDBC操作数据库 ...

  6. EF的增删改查

    //获取分组信息        public List<UserGroupLogSys> GetUserGroupLogSyslist(int pageIndex, int pageSiz ...

  7. Linux/Unix 线程同步技术之互斥量(1)

    众所周知,互斥量(mutex)是同步线程对共享资源访问的技术,用来防止下面这种情况:线程A试图访问某个共享资源时,线程B正在对其进行修改,从而造成资源状态不一致.与之相关的一个术语临界区(critic ...

  8. Ionic2 rc2 Events 跨界面调用的使用方法及问题解决

    Events:事件注册  在任意一界面注册事件之后可在任意界面根据事件名称进行调用. 首先看一下官方文档的调用方式 import { Events } from 'ionic-angular'; co ...

  9. 将JavaScript 插入网页的方法

    将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...

  10. 算法练习：寻找最小的k个数

    参考July的文章:http://blog.csdn.net/v_JULY_v/article/details/6370650 寻找最小的k个数题目描述:查找最小的k个元素题目:输入n个整数,输出其中 ...