之前以为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. This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its 错误解决办法

    This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary log ...

  2. 2.二级接口ListableBeanFactory

    这个随笔主要讲的是ListableBeanFactory package org.springframework.beans.factory; import java.lang.annotation. ...

  3. iOS启动页加载广告

    1.定义全局成员变量 @interface AppDelegate () @property (strong, nonatomic) UIImageView *adImageView; @proper ...

  4. Django 事务

    Django事务 事务是通过将一组相关操作组合为一个,要么全部成功要么全部失败的单元,可以简化错误恢复并使应用程序更加可靠.事务具有4个特性:原子性.一致性.隔离性.持久性. 默认情况下,在Djang ...

  5. 18.Django原生SQL语句查询返回字典

    在django中执行自定义语句的时候,返回的结果是一个tuple ,并我不是我所期望的dict.当结果是tuple 时,如果要取得数据,必须知道对应数据在结果集中的序号,用序号的方式去得到值. 如果是 ...

  6. SpringBoot_集成Shiro后获取当前用户

    //SecurityUtils.getSubject().getPrincipal();  就可以获取了 protected User getCurrentUser(){ return (User) ...

  7. 蜗牛—ORACLE基础之触发器学习(三)

    版权声明:本文为大腰子原创文章,如若转载,请标明原地址. https://blog.csdn.net/u010071361/article/details/30037215 建立一个触发器, 当职工表 ...

  8. wecenter 问答社区 dockerfile,不用纠结于物理机的运行环境

    FROM webdevops/php-nginx:centos-7-php56 ADD . /app RUN ["chmod", "777", "/a ...

  9. selenium鼠标悬停操作

    有些网页一打开会有一个弹窗,弹窗不消失无法进行取元素操作,只有把鼠标悬停在上面弹窗才会消失,这时就用到了selenium的悬停操作 鼠标悬停  move_to_element() 定位到要悬停的元素 ...

  10. MySQL与Oracle的语法区别详细对比

    MySQL与Oracle的语法区别详细对比 Oracle和mysql的一些简单命令对比在本文中将会涉及到很多的实例,感兴趣的你不妨学习一下,就当巩固自己的知识了   Oracle和mysql的一些简单 ...