zoukankan html css js c++ java

CSS之EM相对单位

之前以为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>

查看全文

相关阅读:
from import 的认识
 模块初识
 eq方法
 hash介绍
 item系列
 析构函数
 serializers进阶
 APIView源码解析
 RPC协议
 面试题补充

原文地址：https://www.cnblogs.com/simonbaker/p/3771870.html