rem和em的区别

article/2025/9/19 5:22:58

一、 rem的特点：

1、rem的大小是根据html根目录下的字体大小进行计算的。

2、当我们改变根目录下的字体大小的时候，下面字体都改变。

3、rem不仅可以设置字体的大小，也可以设置元素宽、高等属性。

二、em的特点：

三、代码部分

1、rem的代码。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>rem</title><style type="text/css">*{margin: 0;padding: 0;}html{font-size:12px;}.outer{font-size:3rem;background:red;width:400px;height:400px;position: relative;}.middle{font-size:2rem;background: aqua;width:200px;height: 200px;position: absolute;left:100px;top:100px;}.inner{font-size:1rem;background: palegreen;width:100px;height:100px;position: absolute;left:50px;top:50px;}</style>
</head>
<body>
<div class="outer">外部<div class="middle">中间<div class="inner">内部</div></div>
</div>
</body>
</html>

rem结果如下：
这里写图片描述

1、em的代码

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>rem</title><style type="text/css">*{margin: 0;padding: 0;}html{font-size:12px;}.outer{font-size:3em;background:red;width:800px;height:800px;position: relative;}.middle{font-size:2em;background: aqua;width:400px;height: 400px;position: absolute;left:200px;top:200px;}.inner{font-size:1em;background: palegreen;width:200px;height:200px;position: absolute;left:100px;top:100px;}</style>
</head>
<body>
<div class="outer">外部<div class="middle">中间<div class="inner">内部</div></div>
</div>
</body>
</html>