css单位em用法

lianflower

已于 2022-09-01 14:24:35 修改

阅读量294

点赞数 1

文章标签： css 前端 html

于 2022-09-01 14:03:27 首次发布

本文链接：https://blog.csdn.net/lianflower/article/details/126642113

版权

Css 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* em：相对于当前元素内文本的字体尺寸，
            如果当前元素没有字体尺寸，
            则相对于浏览器默认字体尺寸（浏览器默认字体尺寸为16px） */

        /* height的值为32px，因为em-container中没有字体尺寸，所以此处em相对于浏览器默认字体尺寸（16px） */
        /* .em-container {
            height: 2em;
            border: red solid 1px;
        } */

        /* height的值为40px，em相对于当前元素字体尺寸（20px） */
        /* .em-container {
            font-size: 20px;
            height: 2em;
            border: red solid 1px;
        } */

        /* height的值为64px，因为浏览器默认字体尺寸为16px，所以font-size的值为32px
            所以height的值为64px */
        /* .em-container {
            font-size: 2em;
            height: 2em;
            border: red solid 1px;
        } */




        .em-container {
            font-size: 20px;
            height: 2em;
            border: red solid 1px;
        }

        /* 此处font-size的值为30px：因为子元素会继承父元素的字体大小，
            而父元素的字体大小为20px，所以1.5em为30px */
        .em-container-child {
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <div class="em-container">Em Unit
        <div class="em-container-child">EM child element</div>
      </div>
</body>
</html>