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. js根据当前时间获取当前季度，月份，和第几周

    function jidu()  {   var getMonthWeek = function (a, b, c) {    var date = new Date(a, parseInt(b) - ...

  2. 常用JavaBean:JdbcBean codes:Java通过JDBC 连接 Mysql 数据库

    package bean;import java.sql.*;import com.mysql.jdbc.PreparedStatement;public class JdbcBean { publi ...

  3. Modify textures at runtime

    动态修改Texture Modify textures at runtime?http://answers.unity3d.com/questions/7906/modify-textures-at- ...

  4. hive踩过的小坑

    上周使用hive做一些操作,几个小问题纠结很久.特此记录下: hive概念   hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单的sql查询功能,可以 ...

  5. spring.xml中的配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  6. SourceForge无法访问的解决办法

    这一阵java框架spring和hibernate都有新版本了(spring2.5.5和hibernate3.2.6)想下载看看,却发现 SourceForge.net无法打开.刚才用Google搜索 ...

  7. 树（二）——二叉树

    目录 本章主要讲解内容为: 树的非递归遍历算法,两种版本 树的扩展前缀以及前缀中缀构建方法 源码 btree.cpp btree.h 基础知识 一.定义 二叉树的递归定义:二叉树是每个结点最多含有两棵 ...

  8. Objective－C（ Category 分类，非正式协议,分类延展）

    分类: 主要是给原来类增加一些方法;不可以增加成员变量 Person (Person+eat) 非正式协议: 非正式协议就是类别,即凡是NSObject或其子类Foundation框架中的类增加的类别 ...

  9. 使用squid配置透明代理并对上网行为进行控制

    使用Squid配置透明代理 环境:CentOS 6.4 + squid-3.1.10-20.el6_5.3.x86_64 1.检查squid是否默认安装,没有安装先安装 rpm -qa squid 假 ...

  10. 002 C#学前入门

    2016-01-16 1..Net平台  .Net FrameWork框架.Net FrameWork框架提供了一个稳定的运行环境,:来保障我们.Net平台正常的运转 2.C#语言 c sharp编程 ...