CSS3中的长度单位（em、rem）

最新推荐文章于 2022-04-16 12:01:06 发布

xuehyunyu

最新推荐文章于 2022-04-16 12:01:06 发布

阅读量377

点赞数

CC 4.0 BY-SA版权

文章标签： CSS html em rem 长度单位

本文链接：https://blog.youkuaiyun.com/xuehyunyu/article/details/71908303

本文通过一个简单的 HTML 示例介绍了 CSS 中 rem 和 em 单位的应用方式。rem 单位使得各层级元素的字体大小相对于根元素进行缩放，而 em 单位则根据父级元素的字体大小进行调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>长度单位</title>
</head>
<body>
<div style="font-size: 12px">
    我是第一层
    <div style="font-size: 2rem"><!--em:每一层的字体是前一层字体的2倍，以此累加
                                     rem:每一层的字体是第一层字体的2倍-->
        我是第二层
        <div style="font-size: 2rem">
            我是第三层
            <div style="font-size: 2rem">
                我是第四层
            </div>
        </div>
    </div>


</div>

</body>
</html>

效果图：