CSS 中 em 和 rem 单位的区别

本文由花朝网原创首发,授权转载请以链接形式注明出处,本文唯一永久链接:http://www.huazhaox.com/article/18

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 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
  • 代码github仓库:https://github.com/shuirongsh...使用方式看名称效果图,有没有和自己想要的效果类似的有的话,复制粘贴代码使用也可以自己修改一下css效果并不是特别难...

  • CSS 容器尺寸单位cqw 容器查询宽度(Container Query Width)占比。1cqw 等于容器宽度的 1%。假设容器宽度是 1000px,则此时 1cqw 对应的计算值就是 10px。...

  • width: 118px; height: 17px; font-size: 13px; font-family: MicrosoftYaHei-Bold, MicrosoftYaHei; font-...

  • 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: div { width: 300px; height: 300px; background:...

  • 动态DOM节点的classList属性 为 div元素动态添加 class: element.classList 定义和用法 classList 属性返回元素的类名,作为 DOMTokenList ...

  • 前言 对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢,你的用户很可能会因此离你而去。所以页面性能对于前端开发者...

  • 本次我把CSS中的重难点整理出来,总共54个核心知识点,供大家复习,希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点,同时也是面试必问的内容。 因为涉及的内容较多,我分5篇内容发出来,好逐...

  • 写在前面的话   大多数标签在展示文本内容的时候都会默认把文本中的空白和换行符去掉,这的确大大的使得文本的排版更加美观了,也怎加了区域的利用率,可是就有一些需求是需要原原本本的展示出原汁原味的文本格式...

  • 前几天我在面试前端开发同学的时候,有问到关于margin基础布局相关内容的过程中,发现很多同学基本解释不清楚,今天刚好有点时间就整理了一篇笔记出来。就以下5点在CSS布局经常会用到的经典布局解决方案。...

  • 微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整...

  • 本来按照正常的学习顺序, 应该是HTML、CSS、JavaScript,再到Vue。但是到我这里顺序就反过来了一样,先Vue 、再JavaScript,然后CSS。原因在于我之前就学习过这些,虽然当初...

  • 提及噪点效果,首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果。如果你没有看过那种旧电视,可以看下面的gif动图,真实的情况噪点的变化速度会快很多,这里为了gif的大小,截取的时间较短供...

  • 大部分同学都用过 CSS 的屏幕宽度媒体查询,像是这样: @media screen and (min-width: 900px) { div { padding: 1rem 3rem; ...

  • 全文链接:http://tecdat.cn/?p=30579目前,在国际科学界,如何正确评价基础科学研究成果已经引起了越来越广泛的关注。而被SCI和SSCI收录的科技论文数量,被认为是衡量一个国家基础...

  • 先制作一个正方形,让圆点在正方形的最外侧 body { margin: 0; } .loading { width: 200px; height: 200px; ba...

  • 欢迎关注我的公众号:前端侦探最近在项目中需要对特殊字体进行绘制与导出,如下简单解释一下:所谓绘制,就是视觉上可以看到就行(预览状态),导出呢,就是将看到的转换成图片(或者Canvas),以便于后续处理...

  • 怎么样子盒子能撑起父盒子? 从行内元素跟块元素来看: 一般情况下,行内元素只能包含数据和其他行内元素。 而块级元素可以包含行内元素和其他块级元素. 块级元素内部可以嵌套块级元素或行内元素。 建议行内...

  • 最近在拜读张鑫旭大神的《CSS世界》,其中很多思维非常值得借鉴学习,特别是对CSS控制显隐的总结,非常到位,记录一下 使用CSS让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然...

  • 基本描述 CSS伪类是很常用的功能,主要应用于选择器的关键字,用来改变被选择元素的特殊状态下的样式。 伪类类似于普通CSS类的用法,是对CSS选择器的一种扩展,增强选择器的功能。 目前可用的伪类有大概...

  • 1、什么是CSS Cascading Style Sheet 级联样式表。 表现HTML或XHTML文件样式的计算机语言。 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定。  2...