我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文说一个非常基础的页面尺寸单位的问题。通过苏南大叔的以往文章,大家可以知道:页面中最常见的尺寸单位是px,如果考虑到自适应等因素的话,常见的尺寸是rem。(当然,还有其它一些奇怪的单位,比如vh、vw等,以及小程序中的单位rpx)。本文中重点描述的是em这个单位,它的使用场景,经常是用于p标签的左边空两个字符text-indent

苏南大叔:如何理解页面尺寸单位em?em和rem有何区别? - em-vs-rem
如何理解页面尺寸单位em?em和rem有何区别?(图5-1)

大家好,这里是苏南大叔的程序如此灵动博客,记录苏南大叔的一些经验总结。如果您喜欢本文,欢迎转载。本文测试环境:谷歌浏览器@ 111.0.5563.111

em

最常见的应用场景就是段落p的左侧空两格。

<p>文字缩进两格,文字缩进两格,文字缩进两格,文字缩进两格,文字缩进两格,文字缩进两格</p>
<style>
  p {
    text-indent: 2em;
  }
</style>

苏南大叔:如何理解页面尺寸单位em?em和rem有何区别? - 文字缩进两格
如何理解页面尺寸单位em?em和rem有何区别?(图5-2)

然而,本文是讨论em的非常见情况的使用的。这种情况就是使用em单位的节点多层嵌套,举例这个的原因是,它最能够体现和rem单位的区别所在。

<div id="box">
    <div class="em">
        14*1.5</br>
        <div class="em">
            14*1.5*1.5</br>
            <div class="em">
                14*1.5*1.5*1.5</br>
            </div>
        </div>
    </div>
</div>
<style>
    #box {
        font-size: 14px;
    }
    .em {
        font-size: 1.5em;
    }
</style>

在这个例子中,em单位应用在了多层嵌套的div上,在最外侧,有定义px为单位的节点。可以看到的是:使用em单位的嵌套节点,实际的字体尺寸随着嵌套的加深而不断变化。尺寸变化的基准是em的上一次dom。如果不存在的话,就是html标签或者body标签里面的font-size

苏南大叔:如何理解页面尺寸单位em?em和rem有何区别? - font-size-em
如何理解页面尺寸单位em?em和rem有何区别?(图5-3)

em不光是用于字体大小的尺寸(虽然日常是这么用的),用作宽度高度之类的也是可以的。

rem

这里不得不提起苏南大叔关于rem.js的这篇文章,链接如下:

em所不同的是:

  • rem的基准尺寸是定义在html标签上的。
  • 正是因为基准的不同,em随着嵌套的增加,大小变化。rem随便嵌套,大小不变。

测试代码:

<div id="box">
    <div class="rem">
        14*1.5</br>
        <div class="rem">
            14*1.5</br>
            <div class="rem">
                14*1.5</br>
            </div>
        </div>
    </div>
</div>
<style>
    html{
        font:italic bold 14px/30px Georgia, serif;
    }
    #box{
        font-size: 500px;
    }
    .rem {
        font-size: 1.5rem;
    }
</style>

苏南大叔:如何理解页面尺寸单位em?em和rem有何区别? - font-size-rem
如何理解页面尺寸单位em?em和rem有何区别?(图5-4)

题外话

这里就提一下font的一个特殊写法:

font:italic bold 14px/30px Georgia, serif;

根据开发者工具的运算结果,这个写法的意思是:font-size:14px以及line-height:30px

苏南大叔:如何理解页面尺寸单位em?em和rem有何区别? - font-size-line-height
如何理解页面尺寸单位em?em和rem有何区别?(图5-5)

相关文章

总结

苏南大叔还写了一些奇怪的css的写法的文章,文章链接如下:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   css