[前端开发] CSS中 em 与 rem的区别
有很多小伙伴们不知道em与rem的区别，那么这篇文章一定能对你有所收获！
·
别再分不清 em 与 rem 了
在前端开发中，em 和 rem 是常用的单位，通常用于设置元素的字体大小、间距等。
我发现很多人容易把两者搞混，分不清他们两者的区别，本文将详细解释
em
先来看 em，它的值取决于父元素的 font-size 文字大小
假设父元素 font-size 为 20px ，那么子元素在使用 em 时相当于： 1em === 20px
em的值取决于父元素的文字大小，假设父元素没有指定，则往上一层找- 假设都没有设置，那么
1em就是默认的16px - 假设有多个父级并且都设置了字体大小，那么将会采取就近原则
<style>
.a {
font-size: 20px;
}
.a .b {
font-size: 30px; // 就近原则
}
.a .b span {
font-size: 2em; // 60px
}
</style>
<body>
<div class="a">
<div class="b">
<span>Hello World!</span>
</div>
</div>
</body>
rem
再来看 rem，它的值取决于 html 的文字大小，与父元素没有关系
假设 html 的 font-size 为 10px ，则 1rem === 10px
如果没有给 html 指定文字大小，则默认为 16px
<style>
html {
font-size: 10px; // 取决于 html 的文字大小
}
.a {
font-size: 20px;
}
.a .b {
font-size: 30px;
}
.a .b span {
font-size: 2rem; // 20px
}
</style>
<body>
<div class="a">
<div class="b">
<span>Hello World!</span>
</div>
</div>
</body>
技术共进，成长同行——讯飞AI开发者社区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)