之前以为em单位只是在font-size中起到继承作用，

后来慢慢觉得，继承，应该是在几乎所有样式中都可以是实现的，比如height,width,border...

今天才简单测试了下，果真是可以实现，不过，只是要基于font-size的一并出现而已！

也就是说，想height等样式也应用上em的继承相对大小，必须在父节点中应用font-size的值！

代码片段如下：(可把emDiv类中的font-size注释来对比看看效果...)

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>css测试</title>
  6.         <style>
  7.             .emDiv {
  8.                 font-size: 2em;
  9.                 height: 2em;
  10.             }
  11.             .heightEmDiv1, .heightEmDiv2 {
  12.                 width: 6em;
  13.                 border-width: 0.2em;
  14.                 border-style: solid;
  15.             }
  16.             .heightEmDiv1 {
  17.                 font-size: 2em;
  18.                 height: 4em;
  19.                 border-color: red;
  20.             }
  21.             .heightEmDiv2 {
  22.                 font-size: 2em;
  23.                 height: 4em;
  24.                 border-color: blue;
  25.             }
  26.         </style>
  27.     </head>
  28.     <body>
  29.         <div class="emDiv">
  30.             <div class="heightEmDiv1">
  31.                 111
  32.                 <div class="heightEmDiv2">
  33.                     222
  34.                 </div>
  35.             </div>
  36.         </div>
  37.     </body>
  38. </html>

CSS之EM相对单位的更多相关文章

  1. [css] px em rem

    一.区别 px是相对于显示器屏幕分辨率而言的. em相对于浏览器的默认字体尺寸. rem相对于HTML根元素. 二.使用  1.em 任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: ...

  2. CSS中em,rem的区别

    首先这两个单位一般用在移动端 不太清楚得求证  再记录 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字 ...

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

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

  4. CSS中em，px区别（转）

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

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

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

  6. 使用em为单位制作两列弹性布局

    一.DIV布局按照定位的方法分为:浮动方法(float),坐标定位方法(position),还有就是两者相结合的方法. 二.DIV布局按照定义单位的不同可分为:固定宽度布局.流体布局.弹性布局和混合布 ...

  7. mobile css & rem & em & px

    mobile css & rem & em & px 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1em=16px, 那 ...

  8. css中em与px

    Px是绝对定位   em是相对定位 1. em的值并不是固定的: 2. em会继承父级元素的字体大小. em应用: 1. body选择器中声明Font-size=62.5%:(注:在ie中把body选 ...

  9. CSS尺寸和字体单位-em、px还是%

    在页面整体布局中,页面元素的尺寸大小(长度.宽度.内外边距等)和页面字体的大小也是重要的工作之一.一个合理设置,则会让页面看起来层次分明,重点鲜明,赏心悦目.反之,一个不友好的页面尺寸和字体大小设置, ...

随机推荐

  1. LLVM编译器

    LLVM 1. 说说 LLVM(Low Level Virtual Machine)到底是什么吧 先说编译器:编译器是把程序员的代码翻译成机器可以理解的语言的工具: 再谈 LLVM:一个模块化和可重用 ...

  2. Python菜鸟之路：前端HTML基础

    前面的章节中,Python的基本知识已经差不多介绍完了.本节介绍HTML相关的知识.需要着重声明的是,前端知识是非常非常重要的知识,以我实际项目经验来看,一个项目的瓶颈在设计和前端.设计就先不说了,前 ...

  3. Android系统移植与调试之------->如何修改Android设备添加重启、飞行模式、静音模式等功能（二）

    今天要说的是为Android设备添加重启.飞行模式.静音模式按钮,客户需求中需要添加这项功能,在长按电源键弹出的菜单中没有这些选项,谨以此文记录自己添加这个功能的过程. 首先找到长按电源键弹出的对话框 ...

  4. go语言之并发编程 channel

    前面介绍了goroutine的用法,如果有多个goroutine的话相互之间是如何传递数据和通信的呢.在C语言或者JAVA中,传输的方法包括共享内存,管道,信号.而在Go语言中,有了更方便的方法,就是 ...

  5. R语言图形base系统（三）

     本篇介绍R语言base系统绘制散点图.条形图.直方图.箱线图.饼图,还将简单介绍点图.核密度图.折线图. 散点图: attach(mtcars) plot(wt, mpg, main="B ...

  6. PAT 天梯赛 L2-014. 列车调度 【队列】

    题目链接 https://www.patest.cn/contests/gplt/L2-014 思路 其实 每条火车道 都可以视为一个队列 满足队列的性质 当已经存在的队列 中 的列车序号 都小于 当 ...

  7. 每天一个Linux命令（11）nl命令

    nl命令读取 file 参数(缺省情况下标准输入),计算输入中的行号,将计算过的行号写入标准输出. 其默认的结果与cat -n有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 ...

  8. Javascript中闭包的个人理解

       Javascript的一个特殊点就在于它的闭包和回调特性,这两个特性让初学Javascript的我是云里雾里,至今仍在苦苦摸索与理解.在一番苦思之后,整理了一下资料,将自己的理解思路记录下来,以 ...

  9. 奥森图标和CSS特殊字体使用方法

    作为第一篇博文,写这个 我快要被气炸,好吧,废话不说了 昨天在项目中发现有很多这些Awesome图标 也在网上找了下Font Awesome下载后这些文件,现在的版本是4.2,Font Awesome ...

  10. 20145229吴姗珊 《Java程序设计》第5周学习总结

    20145229吴姗珊 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 异常处理 1.设计错误对象都继承自java.lang.Throwable类 2.Java中所有错误都会 ...