当前位置:   article > 正文

CSS中的em单位_css em

css em

CSS中有众多单位,常用的px是绝对单位,em则是相对单位。在响应式和移动端的大前提下,使用em能够更方便快捷的一次性调整web文档极其HTML元素的字体大小、宽度、边距、边框等一系列属性,可以说在某些方面,使用em作为单位比px更灵活。


一、什么是em

1.em的长度

em是CSS中的一个相对单位,它的单位长度是根据元素的文本垂直长度来决定的。可以作用在width、height、line-height、margin、padding、border等样式的设置上。

1em=元素中文本的1个垂直高度
  • 1

根据上面的规则:如果元素中文本的大小为16px,那么1em=16px;如果元素中文本大小为20px,那么1em=20px……

2.em与HTML文本大小默认值

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

1em=16px
  • 1

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

body {
    font-size: 24px;
    width: 10em;    /* 10em = 24px * 10 = 240px */
}
  • 1
  • 2
  • 3
  • 4


3.em与继承

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

<style>
    body {
        font-size: 12px;
    }
    div {
        /* 该元素没有设置font-size,因此继承了父元素的font-size: 12px; */
        width: 10em;    /* 10em = 12px * 10 = 120px */
    }
</style>
<body>
    <div></div>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

需要注意的是,子元素div继承了父元素body的font-size,所以其实在div的样式表中隐含了一句“font-size: 12px;”。现在如果显性的为子元素设置font-size的话,那么子元素将按照自己的font-size计算em的绝对长度。eg:

<style>
    body {
        font-size: 12px;
    }
    div {
        font-size: 20px;
        width: 10em;    /* 10em = 20px * 10 = 200px */
    }
</style>
<body>
    <div></div>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

注意上例中div的font-size使用了px作为单位,那如果想使用em怎么办呢?需要注意的是,在设置font-size中使用em作为单位,那么em将是其父元素font-size的相对值。eg:

<style>
    body {
        font-size: 12px;
    }
    div {
        font-size: 2em; /* 2em = 12px * 2 = 24px */
        width: 10em;    /* 10em = 24px * 10 = 240px */
    }
</style>
<body>
    <div></div>
</body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

子元素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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17



二、根据px计算出正确的em

1.使用PXtoEM计算器

使用在线工具PXtoEM(http://pxtoem.com/)可以轻松快捷的根据px计算出所需要的em值。

2.手动计算em

由下面的例子可以反向推导出px转em的计算公式

<style>
    div {
        font-size: 16px;
        width: 2em; /* 2em = 16px * 2 = 32px */
    }
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

px = 参考文本大小 * em  =>  em = px / 参考文本大小

3.注意事项

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

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


三、em的缺点

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/74579
推荐阅读
相关标签
  

闽ICP备14008679号