数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究CSS 中的 em 和 rem 单位？
您可能已经注意到，在使用 CSS 属性设置元素大小时，有两种选择，一种是绝对单位，另一种是相对单位。绝对单位是恒定的，大小固定，可以用 cm、mm、px 设置。另一方面，相对单位是相对于其他内容的，可以是父元素或任何其他元素。
在本教程中，我们将比较 CSS 中的 em 和 rem 单位。
Em 单位
em 单位使您可以更改元素的大小，其字体大小相对于其父元素。这意味着如果父元素的大小发生变化，子元素的大小也会发生变化。
让我们来看一个例子，了解 em 单位的作用。
示例
在这个例子中，我们将把子元素的字体大小更改为35px。子元素的边距也将更改为50px。
在这里，我们首先创建了一个父元素，然后将其大小设置为 17.5 px，子元素的字体大小设置为 1em，这意味着子元素的字体大小将是父元素的两倍，元素的边距将保持不变。让我们看看代码的输出。
注意 - `font-size` 属性的用法。当应用于其他属性时，`font-size` 相对于父元素。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Difference between em and rem</title>
<style>
.father {
paddding: 0px;
font-size: 16px;
}
.son {
margin: 1em;
font-size: 1em;
}
</style>
</head>
<body>
<div class="father">
This is the Father element
<div class="son">
This is Son element
</div>
</div>
</body>
</html>
在上面的输出中，有一个父元素和一个子元素。输出中显示子元素的大小与父元素相同。
Rem 单位
rem 单位相对于根元素（即 <html> 元素）的字体大小。如果<html>没有指定字体大小，则使用浏览器的默认值，这里不考虑父元素，只考虑根元素。
示例
我们将保持子元素的字体大小为 50px，然后将元素的边距设置为 40px。与 em 不同，rem 单位的大小对于所有声明都是相对的。
在下面的例子中，我们首先使用了根元素，然后创建了父元素和子元素。然后我们将根元素的字体大小设置为 18px，父元素的字体大小设置为 15px。然后将子元素的字体大小设置为 1.5rem，这意味着根元素的两倍，而不是父元素的两倍。让我们看看输出，了解 rem 单位的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<title>The difference between em and rem units</title>
<style>
html {
font-size: 18px;
}
.son {
font-size: 2rem;
margin: 1.5rem;
}
.father {
font-size: 13px;
}
</style>
</head>
<body>
<div class="father">
This is parent
<div class="son">
This is Child in rem unit system
</div>
</div>
</body>
</html>
您可以在上面的输出中看到，子元素不是父元素的两倍，而是根元素的两倍。
em 单位相对于其最近的父元素的字体大小，它可能导致累积效应。rem 单位相对于 HTML 根字体大小，但不会导致累积效应。
CSS 中的 em 与 rem 单位
这些单位包括 em、vh、vw 和 rem。相对单位也称为可缩放单位，在网站响应式设计中起着重要作用。em 和 rem 单位都是可缩放的相对单位。em 单位相对于 HTML 文档中父元素的字体大小，而 rem 单位相对于整个文档的根字体。
结论
em 和 rem 单位的区别在于，em 单位相对于父元素，而 rem 单位相对于 <html> 根元素，这两个单位都属于相对单位，有助于使网站具有响应性。这些单位有助于设置某些元素的大小。
463 次浏览
