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. SiteFactory简单配制

    进入后台管理: 指向节点,有点节点ID,这个节点ID就是siteFactory根据规则能生成的页面,页面更新网址: http://www.elexcon.com/Category_节点ID/Index ...

  2. html知识2

    1.超链接 语法:<a href "" target="打开方式" name="页面锚点名称">链接文字或者图片</a&g ...

  3. Java 编程入门（词汇表）

    抽象类(abstract class):抽象类不能创建对象,主要用来创建子类.Java中的抽象类使用 abstract 修饰符定义. 抽象数据类型(abstract data type ADT):抽象 ...

  4. 编写windows版ANE

    1.编写WinANE.dll: #include <windows.h> #include <stdlib.h> #include <FlashRuntimeExtens ...

  5. guava学习--FluentIterable

    public class FluentIterableTest { public static void main(String[] args) { Man man1 = new Man(" ...

  6. UE3:SkeletalMesh的绘制流程

    [目标] SkeletalMesh的绘制流程 [思路] 1 顶点缓冲流 静态数据流向 动态数据流向(紫红色箭头) 2 FGPUSkinVertexFactory.ShaderDataType.Bone ...

  7. iOS开发UI篇—Button基础

    iOS开发UI篇—Button基础 一.简单说明 一般情况下,点击某个控件后,会做出相应反应的都是按钮 按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置 二.按钮的三种状 ...

  8. 获取数据库里面最新的ID

    你如果新插入的一段资料,你想获取它的ID,就用   “mysql_insert_id()”; 并且要重新定义一个名称

  9. 什么是 jsonp ？

    浏览器不支持Ajax跨域请求 但能加载任何地方的外部js文件  jsonp就是借用这个特点  通过引入文件拿到想要的数据  而不是通过AJAX请求 假如你想获取 vcico.com  的 $data ...

  10. Model2模型介绍

    在JSP课程中有 Model1 模型的介绍 模型二: 实例接JSP课程,先去看JSP课程了