px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定font-size的尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。

为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

注:在body里面注明 font-size:62.5%;

1.之后可以将em当px使用,x10就好,当然前提是父级标签里面没设定font-size,

2.一旦父级元素有设定字体大小, em前面数值x就相当于父级元素字体乘以x%

3.相对最临近父级元素,且可以一直往下叠加.

下面案例对比你可以看的更清楚px和 em的使用

 <body style="font-size:62.5%;">

 <div style="width:200px; height:300px; margin-top:20px; border:1px solid #f00; font-size:2em; ">

     这里的文字是第一级的大小

     <div style="font-size:0.9em;">

     这里的文字是第二级的,相对第一级x90%;

     <p style="font-size:0.8em;">这里的文字是第三级的,相对第二级x80%</p>

     </div>

 </div>

 <div style="width:200px; height:300px; margin-top:20px; border:1px solid #f00; font-size:20px; ">

     这里的文字是第一级的大小

     <div style="font-size:18px;">

     这里的文字是第二级的

     <p style="font-size:14px;">这里的文字是第三级的</p>

     </div>

 </div>

 </body>

px和em区别-在font-size的 css 的使用的更多相关文章

  1. PT与PX，em(%)区别

    字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:pt就是point,是印刷行业常用单位,等于1/72英寸. ...

  2. （转）px、em、rem的区别和使用

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...

  3. px，em, rem的区别，在项目中怎么使用rem.

    一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...

  4. rem、px、em之间的区别以及网页响应式设计写法

    个人收藏用,转载自:http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激 ...

  5. 彻底弄懂css中单位px和em,rem的区别

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...

  6. CSS中单位px和em,rem的区别

    PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上 ...

  7. px、em、rem区别介绍

    px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...

  8. css中px，em和rem的区别

    css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...

  9. px和em的区别

    px和em的区别 2012-06-21 23:01:06|  分类: CSS|字号 订阅 在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的.大部分人在CSS代码编写中总是 ...

随机推荐

  1. 配置spring事务管理的几种方式(声明式事务)

    Spring配置文件中关于事务配置总是由三个组成部分,分别是DataSource.TransactionManager和代理机制这三部分,无论哪种配置方式,一般变化的只是代理机制这部分. DataSo ...

  2. leetcode-188 买卖股票4

    题目 给定一个数组表示股票每天的价格,最多交易k次,且手上最多只能拥有一支股票(即只能先卖出手上现有的股票再去购买新的股票),求最大的收益.     题目链接:买卖股票4     开始思路不清楚,参考 ...

  3. Django1.9开发博客（10）- 全文搜索

    Django本身不提供全文检索的功能,但django-haystack为其提供了全文检索的框架. django-haystack能为Django提供whoosh,solr,Xapian和Elastic ...

  4. C中的Float分析

    C/C++中, 浮点数,float以及 double 在内存中是怎样存储的? 假如,我有32-bit 8bit 8bit 8bit 0 0 0 0 0 1 1 1 1 对于整形int,我们可以很快得出 ...

  5. 初次使用InstallShield笔记

    公司的产品需要打包发布,以前一直没打包,打包方法的学习交给了我 下面的内容是我研究过后的,通过回忆写的笔记.由于不熟悉,可能会有错误或者是笨办法,希望高手指正,感激不尽. 有些东西是什么,以及是什么意 ...

  6. 分布式系统中一些主要的副本更新策略——Dynamo/Cassandra/Riak同时采取了主从式更新的同步+异步类型，以及任意节点更新的策略。

    分布式系统中一些主要的副本更新策略. 1.同时更新 类型A:没有任何协议,可能出现多个节点执行顺序交叉导致数据不一致情况. 类型B:通过一致性协议唯一确定不同更新操作的执行顺序,从而保证数据一致性 2 ...

  7. jquery实现百度类似搜索提示功能（AJAX应用）

    有时候觉得百度那个输入内容就有提示的工具很神奇,它究竟是怎么做到的呢?以前在一个进销存系统中也做过这么个功能,但是远远不及百度的功能强大,百度可以输入首字母,关键字拼音,或关键字都可以匹配,有时在想, ...

  8. iOS开发UI篇—Quartz2D使用（图片剪切）

    iOS开发UI篇—Quartz2D使用(图片剪切) 一.使用Quartz2D完成图片剪切 1.把图片显示在自定义的view中 先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: - ...

  9. webix custom component-九宫格

    上篇大致讲了对源码的理解,这篇展示一个初步的九宫格控件.直接上源码: webix.protoUI({ name:"grid", $init:function(config){ co ...

  10. oracle 11g ORA-12541: TNS: 无监听程序 (DBD ERROR: OCIServerAttach)

    From :http://www.cnblogs.com/wangyt223/archive/2012/12/11/2812931.html em无法浏览,同时监听起不来.同时他的监听服务还是正常的, ...