⭐️ 本文首发自前端修罗场(点击即可加入)，一个专注 Web 技术、答疑解惑、面试辅导、职业发展的社区。现在加入，即可参与打卡挑战，和一群人一起努力。挑战成功即可获取一次免费的模拟面试机会，进而评估知识点的掌握程度，获得更全面的学习指导意见，不走弯路，不吃亏！

浅谈CSS中常用的相对长度单位

顾名思义，相对单位是根据与其他事物的关系来度量。所以，要注意到，所度量的实际距离，可能会因为不在其控制之下的其他因素而改变。如屏幕分辨率、可视区域的宽高等等。并且，对于某些相对单位，其大小会因使用该单位的元素的不同而不同。

em

CSS中，em 被定义为给定字体的font-size值。如果一个元素的font-size为14px,那么1em=14px。

但是，我们前面说到，相对单位的大小会因为使用该单位的元素的不同而不同。

示例：

h1,h2,p {margin-left:1em;
}

假设h1,h2,p的font-size大小分别为24px,18px,12px。
那么h1,h2,p的左外边距分别为24px,18px,12px。

如图所示：

即它会继承父元素的font-size值。CSS属性line-height，font-size，margin-bottom和margin-top常具有一个用em表示的值。

rem

这个单位代表相对于根元素的 font-size 大小（例如
<html>元素的font-size）。当用在根元素的font-size上面时，它代表了它的初始值。

如示例：

px

像素可以从显示器这个角度理解。显示器是由一个一个小方块组成的网格，一个小方块是一个像素。如果我们将某个div的宽高均设置为30px，那么在这个div显示时，该div的宽高就会由相应多个显示器元素组成。

通常，我们可以使用像素表示图像的宽高，因为图像的宽高本身就是像素值。

那么有人会问，为什么px是相对单位呢？

在使用不同设备输出时，眼睛与设备输出的典型距离是不同的。比如电脑显示器，通常是一臂之距，而看书和纸张时（对应于打印机的设备输出），则通常会更近一些。看电视时则会更远。

因此，

参考像素：

对于电脑显示器是0.26mm（即1/96英寸）；
对于激光打印机是0.20mm（假设阅读距离通常为55cm，即21英寸）；

在CSS中，建议采用96ppi作为参考像素，这是windows机器常用的度量。

对于屏幕显示，通常是一个设备像素（点）的显示。
对于打印机和高分辨率的屏幕，一个CSS像素意味着多个设备像素，因此，每英寸的像素的数量保持在96左右。

❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步，不走弯路，不吃亏~

【CSS】浅谈 CSS 中常用的相对长度单位 em, rem相关推荐

浅谈开发中常用的设计模式
设计模式在开发中占很重要的地位.在大型项目中使用好设计模式往往会取得事半功倍的效果.本篇博客就介绍下几种在开发中常用到的设计模式. 设计原则先看下一些约定俗成的设计原则,其实要遵守以下所有原则很难, ...
浅谈UML中常用的几种图——鲁棒图
什么是鲁棒图鲁棒图包含 3 种元素(如图 8-2 所示),它们分别是边界对象.控制对象.实体对象: 边界对象对模拟外部环境和未来系统之间的交互进行建模.边界对象负责接收外部输入,处理内部内容的解释, ...
html 怪异模式,CSS_浅谈CSS编程中的怪异模式，怪异模式盒模型今天学习了 - phpStudy...
浅谈CSS编程中的怪异模式怪异模式盒模型今天学习了一下css3的box-sizing属性,顺便又温习了一下css的盒模型,最后觉得有必要对盒模型做一个全面整理. 先不考虑css3的情况,盒模型一共 ...
php css定位到图片上,CSS_浅谈css中图片定位之所有图标放在一张图上，如今做网页为了使网站丰富多 - phpStudy...
浅谈css中图片定位之所有图标放在一张图上如今做网页为了使网站丰富多彩,富于表现力,往往需要应用大量的图片/图标.如何处理这些图片,使其尽量不影响网页载入,解析等速度,是一个不大不小的问题.如果你的 ...
css中字体下划线样式,css下划线浅谈css自定义下划线
使用css样式对一段文字或一段文字中其中几个文字设置虚线效果的下划线如何实现?我们知道css字体下划线使用text-decoration样式实现,而虚线下划线则不能使用此css样式属性.要实现通过下边 ...
Web前端之浅谈css
Web前端之浅谈CSS CSS 什么是CSS? CSS的三种引用方式 CSS常用选择器介绍选择器权重字体属性文本属性元素分类 display属性: 块状元素行内元素行内块元素盒模型内边 ...
html css 命名规范,浅谈css命名规则(新手必看)
头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left rig ...
css inport作用,浅谈css和@import区别及用法详解
下面小编就为大家带来一篇浅谈css和@import区别及用法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 css和@import都是调用外部样式表的方法. 一.用法 ...
浅谈CSS Modules以及CSS Modules在Vue.js上的使用
前言在平常的开发或者学习中,我们可能会有意无意的接触到CSS Modules.那CSS Modules到底是什么呢?现在,我将带你走进CSS Modules,去了解它的始末.本文将从什么是CSS ...
matlab泊松分布随机数和图像_浅谈可靠性理论中的常用概率分布
浅谈可靠性理论中的常用概率分布 1. 泊松分布基本原理泊松分布是最常见的离散概率分布,适合描述单位时间内随机事件发生的概率. (1) 泊松分布概率密度(不可靠度)计算公式 MATLAB概率密度函数 ...

【CSS】浅谈 CSS 中常用的相对长度单位 em, rem

浅谈CSS中常用的相对长度单位

em

rem

px

【CSS】浅谈 CSS 中常用的相对长度单位 em, rem相关推荐

最新文章

热门文章