em单位使用方法

最新推荐文章于 2021-09-07 10:35:34 发布

黑色咖啡 Ken

最新推荐文章于 2021-09-07 10:35:34 发布

阅读量2.8k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/a4561614/article/details/80988455

版权

CSS3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

浏览器中的文本一般默认为16px，也就是说，默认的情况下：

1em=16px

那如何改变这个设定呢？只要显式的设置body元素的font-size即可。

body {
    font-size: 24px;
    width: 10em;    /* 10em = 24px * 10 = 240px */
}

em与继承

在CSS中，如果一个元素没有设置font-size，那么它的font-size值就是它父元素的font-size值，这很好理解，就是简单的继承而已

<style>
    body {
        font-size: 12px;
    }
    div {
        /* 该元素没有设置font-size，因此继承了父元素的font-size: 12px; */
        width: 10em;    /* 10em = 12px * 10 = 120px */
    }
</style>
<body>
    <div></div>
</body>

子元素div的font-size是根据其父元素body的font-size确定的，因此2em = 12px * 2, = 24px；而div的width是相对于自己的font-size确定的，因此10em = ( 12px * 2 ) * 10 = 240px。所以div中2em=24px，10em=240px也就不奇怪了。事实上，不仅是width，子元素中除了font-size的em是根据父元素的font-size确定的，其他所有em都是根据自身的font-size确定的。

<style>
    body {
        font-size: 16px;
    }
    div {
        font-size: 1.25em;  /* 1.25em = 16px * 1.25 = 20px */
        width: 10em;    /* 10em = 20px * 10 = 200px */
        height: 5em;    /* 5em = 20px * 5 = 100px */
        border: 0.05em solid #000;  /* 0.05em = 20px * 0.05 = 1px */
        margin: 0.25em; /* 0.25em = 20px * 0.25 = 5px */
        padding: 0.75em;    /* 0.75em = 20px * 0.75 = 15px */
        line-height: 1.5em; /* 1.5em = 20px * 1.5 = 30px */
    }
</style>
<body>
    <div></div>
</body>

注意事项

上面的公式中，“ 参考文本大小”需要格外注意：

如果元素自身设置了font-size，那么参考文本大小就是自身的font-size大小
如果元素自身没有设置font-size，那么参考文本大小就是父元素的font-size大小
为元素设置font-size时，如果使用em作为单位，那么参考文本大小是父元素的font-size大小

em的缺点

文本大小使用px、em、pt还是百分比的讨论持续了很久，em单位同样拥有其缺点。我们已经知道，在不设置元素font-size的情况下，em总是根据父元素的font-size来确定长度；即使元素设置了font-size，多次嵌套使用em也往往会造成疏忽，不仅使用前需要大量计算，而且不能保证没有漏网之鱼。这将是一个繁杂而低效率的工作。

幸运的是，CSS3带来了rem单位，这可以说是em单位的“改良版”，有关rem的使用方法将在下一篇文章中记录

黑色咖啡 Ken

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
em单位使用方法

浏览器中的文本一般默认为16px，也就是说，默认的情况下：1em=16px那如何改变这个设定呢？只要显式的设置body元素的font-size即可。body { font-size: 24px; width: 10em; /* 10em = 24px * 10 = 240px */}em与继承在CSS中，如果一个元素没有设置font-size，那么它的font-size值就...
复制链接

扫一扫