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>
原文地址:https://www.cnblogs.com/simonbaker/p/3771870.html