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. 32位和64位系统区别及int字节数

    理论上来讲 我觉得数据类型的字节数应该是由CPU决定的,但是实际上主要由编译器决定(占多少位由编译器在编译期间说了算). 常用数据类型对应字节数   可用如sizeof(char),sizeof(ch ...

  2. WIN7 java7 环境变量配置

    1 首先要搞清楚,java可能安装了两个部分,一个叫JDK,一个叫jre.其中jre若已经安装了,那么在安装JDK的时候,就不要放在默认的C:\Program File\java\XXX目录.最好另起 ...

  3. OPENGL学习之路（0）--安装

    此次实验目的: 安装并且配置环境. 1 下载 https://www.opengl.org/ https://www.opengl.org/wiki/Getting_Started#Downloadi ...

  4. webstorm 注册码，亲测可用

    WebStorm注册码 User Name: EMBRACE License Key: ===== LICENSE BEGIN ===== 24718-12042010 00001h6wzKLpfo3 ...

  5. CentOS 下 rpm包与 yum 安装与卸载

    rpm包的安装:      1.安装一个包 # rpm -ivh 2.升级一个包 # rpm -Uvh 3.移走一个包 # rpm -e 4.安装参数 --force 即使覆盖属于其它包的文件也强迫安 ...

  6. Java数据库操作

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

  7. Android 之 log

    android.util.Log常用方法: Log.v()  VERBOSE  任何消息都会输出 Log.d()  DEBUG  仅输出debug调试的意思,但他会输出上层的信息,过滤起来可以通过DD ...

  8. Windows Store App 旋转中心

    旋转中心的位置可以通过设置CenterOfRotationX.CenterOfRotationY和CenterOfRotationZ属性来指定.CenterOfRotationX和CenterOfRo ...

  9. 使用Jsoup 抓取页面的数据

    需要使用的是jsoup-1.7.3.jar包   如果需要看文档我下载请借一步到官网:http://jsoup.org/ 这里贴一下我用到的 Java工程的测试代码 package com.javen ...

  10. JavaScript基础--简单功能的计算器(十一)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...