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

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

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

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>css测试</title>

        <style>

            .emDiv {

                font-size: 2em;

                height: 2em;

            }

            .heightEmDiv1, .heightEmDiv2 {

                width: 6em;

                border-width: 0.2em;

                border-style: solid;

            }

            .heightEmDiv1 {

                font-size: 2em;

                height: 4em;

                border-color: red;

            }

            .heightEmDiv2 {

                font-size: 2em;

                height: 4em;

                border-color: blue;

            }

        </style>

    </head>

    <body>

        <div class="emDiv">

            <div class="heightEmDiv1">

                111

                <div class="heightEmDiv2">

                    222

                </div>

            </div>

        </div>

    </body>

</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. 智能家居DIY-空气质量检测篇-获取温度和湿度篇

    目录 智能家居DIY-空气质量检测篇-获取空气污染指数 前言 话说楼主终于升级当爸了,宝宝现在5个月了,宝宝出生的时候是冬天,正是魔都空气污染严重的时候,当时就想搞个自动开启空气净化器,由于种种原因一 ...

  2. 洛谷 2216 [HAOI2007]理想的正方形

    题目戳这里 一句话题意 给你一个a×b的矩形,求一个n×n的子矩阵,矩阵里面的最大值和最小值之差最小. Solution 这个题目许多大佬都是单调队列,但是我不是很会,只好用了比较傻逼的方法: 首先我 ...

  3. linux c编程：进程控制(二)_竞争条件

    前面介绍了父子进程,如果当多个进程企图对共享数据进行处理.而最后的结果又取决于进程运行的顺序时,就认为发生了竞争关系.通过下面的例子来看下 在这里标准输出被设置为不带缓冲的,于是父子进程每输出一个字符 ...

  4. ThoughtWorks(中国) 程序员读书雷达

    ThoughtWorks(中国)程序员读书雷达 软件业的特点是变化.若要提高软件开发的技能,就必须跟上技术发展的步伐.埋首醉心于项目开发与实战,固然能够锤炼自己的开发技巧,却难免受限于经验与学识.世界 ...

  5. Java中byte转换int时与0xff进行与运算的原因

    http://w.baike.com/LGAdcWgJBBQxRAHUf.html 转帖 java中byte转换int时为何与0xff进行与运算 在剖析该问题前请看如下代码 public static ...

  6. Python:笔记(3)——面向对象编程

    Python:笔记(3)——面向对象编程 类和面向对象编程 1.类的创建 说明:和Java不同的是,我们不需要显示的说明类的字段属性,并且可以在后面动态的添加. 2.构造函数 构造函数的功能毋庸置疑, ...

  7. CodeForces - 580C Kefa and Park 【BFS】

    题目链接 http://codeforces.com/problemset/problem/580/C 题意 根节点是 1 然后所有的叶子结点都是饭店 从根节点到叶子结点的路径上 如果存在 大于m 个 ...

  8. 每天一个Linux命令（22）find命令_命令详解

        find命令的一些常用参数的常用实例和用时的注意事项.     实例:     (1)-name参数: 1)[sunjimeng@localhost home]$ find ~ -name & ...

  9. poj 3126 Prime Path 【bfs】

    题目地址:http://poj.org/problem?id=3126 Input One line with a positive number: the number of test cases ...

  10. java入门了解13

    小知识点: 网络编程:主要解决计算机间数据传输 不需要html页面可以达到数据传输:QQ,微信 网页编程:继续Html页面基础上数据交互:OA,天猫... java方向:web方向,annrod常用S ...