em是相对于当前元素的字体大小而言,比如font-size:14px;那么这个元素的1em=14px.

如果当前元素未定义字体大小,则会向上继承父元素的字体大小,如果当前元素的所有祖先元素都没有定义font-size属性值,该元素就会继承浏览器默认样式.

所有浏览器的默认字体大小都是16px.

这样,1em=16px,0.75em=16px*0.75=12px

可是这么计算有点麻烦啊?好办,我们通常在样式中会声明这么一句body{font-size:62.5%}

即设置默认字体大小16px*62.5%=10px;

这样一来,1em=10px,0.75em=7.5px,是不是方便了一些呢?

再来个例子

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        *{padding:0;margin:0;}

        html{font-size:62.5%;}

        p{display:inline-block;border:1px solid silver;}

        /*使用px作为单位*/

        #p1

        {

            font-size:15px;

            width:150px;

            height:75px;

            text-indent:30px;

        }

        /*使用em作为单位*/

        #p2

        {

            font-size:1.5em;

            width:10em;

            height:5em;

            text-indent:2em;

        }

    </style>

</head>

<body>

    <p id="p1">两个段落的文字呈现相同的样式</p><br />

    <p id="p2">两个段落的文字呈现相同的样式</p>

</body>

</html>

结果是两个段落的文字呈现相同的样式.

可能有人会问,p2的width不应该是15em吗?height不应该是7.5em吗?text-indent不应该是3em吗?

可是别忘了em的定义啊,是相对于当前元素的字体大小而言的,p2的字体大小被设置成了1.5em=15px;

那么对这个元素而言,1em就是15px了,所以width=150px/15px=10em;height,text-indent依此类推;

这就是统一单位为em时需要注意的.

em与当前元素的不解之缘的更多相关文章

  1. CSS中强悍的相对单位之em(em-and-elastic-layouts)学习小记

    使用相对单位em注意点 1.浏览器默认字体是16px,即1em = 16px,根元素设置如下 html{ font-size: 100%; /* WinIE text resize correctio ...

  2. css单位：em，rem解释

    em:所有浏览器都符合:1em=16px;1.具有继承性2.em的根元素是body,当设置了根元素的大小时,大小是定义的数字乘以根元素定义的大小值 rem:1rem=16pxrem不具有继承性,其根元 ...

  3. rem、em、px的区别

    px 像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或re ...

  4. CSS3中的弹性布局——"em"的用法

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

  5. JQuery_DOM 简介/设置元素及内容

    一.DOM 简介 1.D 表示的是页面文档Document.O 表示对象,即一组含有独立特性的数据集合.M表示模型,即页面上的元素节点和文本节点. 2.DOM 有三种形式,标准DOM.HTML DOM ...

  6. CSS中强大的EM

    (转)作者:dearjohn ,发布于2012-7-31 http://www.uml.org.cn/html/201207311.asp 使用CSS也好久了,但一直都是在使用“px”来设置Web元素 ...

  7. EM css

        原文地址http://www.uml.org.cn/html/201207311.asp             CSS中强大的EM    作者:dearjohn ,发布于2012-7-31, ...

  8. jQuery mobile 前台设计中的css em的使用。

    先贴个网址:http://www.uml.org.cn/html/201207311.asp 大家可以参考一下面这张转换表(body字体为16px时的值) 总结 长篇介绍了一大堆,唯一想告诉大家的是以 ...

  9. 何时使用 Em 与 Rem

    原文  http://www.w3cplus.com/css/when-to-use-em-vs-rem.html   你可能已经很熟练使用这两个灵活的单位,但你可能不完全了解何时使用rem,何时使用 ...

随机推荐

  1. DirectX11 学习笔记6 - 使用D3DXMATH数学库的一个样例

    这个样例是在之前的样例基础上 .把之前d3dx10math数学库换成了最新的d3dxmath.长处就不说了.先上效果图 所有代码.以及效果文件 文件结构 所有代码: 依照上图的文件顺序 #pragma ...

  2. ctags的基本操作总结

    ctags用法 说明: a.       ctags能够分析程序生成tags文件: b.         生成的tags文件,能够用 vi -t 查找结构体,数据类型,函数名所在位置.非常方便: ct ...

  3. Codeforces Round #390 (Div. 2) D. Fedor and coupons

    题意:题目简化了就是要给你n个区间,然后让你选出k个区间  使得这k个区间有公共交集:问这个公共交集最大能是多少,并且输出所选的k个区间.如果有多组答案,则输出任意一种.   这题是用优先队列来处理区 ...

  4. 2014百度之星第二题Disk Schedule(双调欧几里得旅行商问题+DP)

    Disk Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) To ...

  5. tlplayer 全部平台版本号支持水印叠加

    tlplayer支持视频渲染前水印叠加.各个系统版本号相同支持. 联系方式:weinyzhou86@gmail.com QQ:514540005 版权全部,禁止转载. 公布自:http://blog. ...

  6. c# 删除程序占用的文件，强力删除文件，彻底删除文件，解除文件占用

    c# 删除程序占用的文件.清理删除文件.彻底删除文件,解除文件占用 文件打开时,以共享读写模式打开 FileStream inputStream = new FileStream(name, File ...

  7. 学习笔记——DISTINCT

    DISTINCT印象中向来被人诟病,说它效率低下.但网上那些SQL 面试题答案,却时有用之.其中 COUNT(DISTINCT 句式,我以前很少用,这里做个笔记. 为管理岗位业务培训信息,建立3个表: ...

  8. 用Arduino+OSC建立一个iPad铁路王国巡视机

    翻译自:http://blog.mydream.com.hk/howto/build-up-a-ipad-plarail-patrol-with-arduino-osc 简单介绍 这个教程告诉你怎样建 ...

  9. luogu2746 校园网

    题目大意: 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意即使 B 在 A 学校的分发列表中, A 也不一定在 B 学校的列表中. 你要 ...

  10. POJ 1985 求树的直径 两边搜OR DP

    Cow Marathon Description After hearing about the epidemic of obesity in the USA, Farmer John wants h ...