CSS 中 em 和 rem 单位的区别

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 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!