Px是绝对定位   em是相对定位

1. em的值并不是固定的;

2. em会继承父级元素的字体大小。

em应用:

1. body选择器中声明Font-size=62.5%;(注:在ie中把body选择器中声明Font-size=63%)

2. 将你的原来的px数值除以10,然后换上em作为单位;

简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。

3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。(欢迎提出不同意见(*^__^*) 嘻嘻……)

css中em与px的更多相关文章

  1. CSS中em,px区别(转)

    这里向大家描述一下CSS中px和em的特点和区别,px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的,而em是相对长度单位,相对于当前对象内文本的字体尺寸,相信本文介绍一定会 ...

  2. 谈谈CSS中em与px的差异

    在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...

  3. css中em小于1时chrome字体大小和firefox字体大小不一致的问题

    css中em设置为0.8,结果页面显示,chrome字体比firefox字体大了不少. chrome有默认字体大小,默认为12px.设置的字体大小小于12px时,也是按照12px来显示. firefo ...

  4. CSS中的 REM PX EM

    px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的 em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸. ...

  5. 说说css中pt、px、em、rem都扮演了什么角色

    前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...

  6. CSS中的单位px、em、rem、%、vw、vh、vm

    px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...

  7. css中pt、px、em、ex、in等这类长度单位详细说明

    在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等 绝对长度单位,如pt ...

  8. 关于CSS中的单位px、em、rem

    首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸 ...

  9. html中em和px

    px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸 ...

随机推荐

  1. 引言:Canvas绘图API快速入门

    引言:Canvas绘图API快速入门 在接触HTML5的初学者包括我都在很多地方见到非常炫的一些页面,甚至好多学习HTML5的开发者都是冲着Web端的页游去的,那么HTML5那么绚丽的页面效果以及游戏 ...

  2. AES 加密,C#后台,javascript前台,crypt-js

    javascript前台代码 <script src="http://apps.bdimg.com/libs/crypto-js/3.1.2/components/core-min.j ...

  3. 百度编辑器ueditor 在vs2008中的使用方法

    个人觉得百度编辑器ueditor还是不错的,虽然出生的时间比较短,但某些方面相比其它富文本编辑器更优秀,免费.可定制等等. 由于在官方下载的ueditor包是在vs2012下开发的,可以在vs2010 ...

  4. JavaScript Set Cursor Style

    <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <titl ...

  5. Oracle入门学习笔记

    参考文献 中文教程     http://wenku.baidu.com/view/b425f404e87101f69e319566.html 经典教程     http://wenku.baidu. ...

  6. Python同步数据库的数据到Neo4J

    写了主要是步骤,如果疑问,请咨询QQ:5988628 Python版本采用2.7.X,默认的2.6.X后期会有问题,建议,一开始就升级Python.然后再安装pip. 访问数据库 sqlalchemy ...

  7. The Struts dispatcher cannot be found. This is usually caused by using Struts tags without the associated filter. 异常

    异常信息如下: The Struts dispatcher cannot be found. This is usually caused by using Struts tags without t ...

  8. javascript 数据结构和算法读书笔记 > 第一章 javascript的编程环境和模型

    1.变量的声明和初始化 必须使用关键字 var,后跟变量名,后面还可以跟一个赋值表达式. var name; var age = 5; var str = 'hello'; var flg = fal ...

  9. tornado web框架

    tornado web框架 tornado简介 1.tornado概述 Tornado就是我们在 FriendFeed 的 Web 服务器及其常用工具的开源版本.Tornado 和现在的主流 Web ...

  10. CC++初学者编程教程(7) 搭建Windows EclipseCCPP软件开发环境

    1根据电脑是32位还是64位来选择工具 2 查看电脑是64位 3 管理员身份运行这个文件 4 安装JDK64位 5. 下一步 6 开始安装 7 安装JAVA 8 安装进行时 9 安装成功 10解压缩 ...