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. sublime常用快捷键整理(未完待续)

    sublime常用快捷键整理: 基本操作 cmd+o 打开文件 cmd+w 关闭当前tab cmd+n 打开新页 cmd+shift+n 打开刚刚关闭的页签 一.选择命令 1.多个单词选择 cmd+d ...

  2. Emmet 插件使用教程

    1)使用 Emmet 生成 HTML 的语法详解生成 HTML 文档初始结构 HTML 文档的初始结构,就是包括 doctype.html.head.body 以及 meta 等内容.你只需要输入一个 ...

  3. Windows SQL Server 2012 R2 安装Intel I217-V/I218-V网卡驱动(转)

    1.下载Intel官方驱动: https://downloadcenter.intel.com/Detail_Desc.aspx?agr=Y&DwnldID=23071&lang=zh ...

  4. Asp.net MVC + EF6.0 经常出现的问题

    1.运行视图时出现问题:未能加载文件或程序集"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c ...

  5. hbase namespace问题

    如果遇到进入shell之后HMaster自动挂掉的问题,并且master的log里出现“TableExistsException: hbase:namespace”字样,很可能是更换了Hbase的版本 ...

  6. 卸载cloudera manager

    卸载Cloudera-Manager sudo /usr/share/cmf/uninstall-cloudera-manager.sh 一直选择Yes 就好 卸载完成后,它会问你是否要将databa ...

  7. 如何:控制命名空间前缀 (C#) (LINQ to XML)

    Visual Studio 2010 本主题介绍在序列化 XML 树时如何控制命名空间前缀. 在很多情况下,不需要控制命名空间前缀. 但是,某些 XML 编程工具需要命名空间前缀的特定控制. 例如,您 ...

  8. Ubuntu 13.04下安装Vmware tools 9.2.3

    更新13.04后 VmwareTools安装会出现三个问题 找不到generic kernel headers头文件 编译vmci出错 编译vmhgfs出错 第一个问题是系统的文件位置换了,而VMTO ...

  9. android studio SVN的搭建

    android studio 安装 SVN:http://www.it165.net/pro/html/201404/11412.html http://jingyan.baidu.com/album ...

  10. os模块实现遍历文件

    使用OS模块中的walk实现文件遍历. walk(top, topdown=True, onerror=None, followlinks=False) 从官方提供的doc中看到有四个参数 1> ...