CSS 尺寸单位有两种：
绝对单位：绝对单位是固定尺寸大小的，与任何的其他元素都无关，在任何情况下他都是固定相同的，绝对单位有 cm, mm, px 等；
相对单位：相对单位是相对于其他元素的尺寸大小，可能相对于父元素、HTML 元素或屏幕宽度，相对单位有 em, rem, vw, vh 等。
本文主要介绍相对单位中的 em 和 rem 单位，通过文字和示例说明两者之间的区别。
基本上，em 和 rem 都是可缩放的相对大小单位， em 单位相对于其父元素的字体大小，rem 单位则是相对于 HTML 文档的字体大小（rem 中的 "r" 代表 "root"）。
em 单位
em 单位允许设置元素相对于其父元素字体大小的数值，当父元素的字体大小改变时，被设置了 em 单位的子元素的属性的大小也会随之改变，比如 border, width, font-size 等属性。
<style>
.父元素 {font-size:20px;}
.子元素 {font-size:2em;margin:1.5em;}
</style>
<div class="父元素">
我是父元素
<div class="子元素">我是子元素</div>
</div>输出效果：
rem 单位
rem 单位基于文档根元素的 font-size 值，也就是 <html> 元素。如果 <html> 元素没有指定字体大小，则使用浏览器默认值 16px。
<style>
html {font-size:30px;}
.父元素 {font-size:20px;}
.子元素 {font-size:2rem;margin:1.5rem;}
</style>
<div class="父元素">
我是父元素
<div class="子元素">我是子元素</div>
</div>输出效果：
0 条评论
请不要发布违法违规有害信息，如发现请及时举报或反馈！
还没有人评论呢，速度抢占沙发！