关注程序员耳东，编程转码真轻松

对于CSS中设置长度宽度等等尺寸的时候，初学者肯定见过最多的是px，但是随着学习的深入你会发现还有em、rem、vh、vw等等很多单位，是不是开始慌了⊙﹏⊙

这篇笔记就聊聊CSS中的单位，欢迎大家学习和自查

相对单位和绝对单位

在设置尺寸的时候，这些CSS单位可以大体分为两类

一类是绝对单位，比如像px这种，你设置了多少就是多少，它就是以像素来做展示

另一类是相对单位，比如像em这种，你设置了CSS属性之后，它会根据某个值去做计算才会得出来最后的结果，所以它是个相对的概念

绝对单位

所谓绝对单位，就是你设置了这个尺寸，它就一直是多少，它在同一个屏幕上就展示那么多像素，不会受到屏幕大小和字体大小的影响，它只和屏幕的分辨率相关

px

px这个单位可能是最常见的，也是新手用的最多的，这个单位的意思很直白：

1px=1逻辑像素

什么是逻辑像素呢？

首先说什么是物理像素，物理像素就是显示屏幕上的1个像素点，比如说320480的屏幕，物理像素的个数就是320480个

那么什么是逻辑像素呢？就是早期的时候，1个逻辑像素就等于1个物理像素，但是后来某些厂商为了让显示屏幕更加的清晰，就在单位面积上增加更多的物理像素而且屏幕的尺寸不变，也就是说原来1个物理像素的位置可能要放2个物理像素了，但如果这样的话，如果一个宽度是320px的网页，在分辨率是320480的屏幕上可以占满宽度，在分辨率是640960的屏幕上就只能占一半的宽度了

这显然是不合理的，所以我们引入了逻辑像素的概念，在真正渲染的时候，会把逻辑像素和物理像素做一个转换，我们平时在CSS里面写的就是逻辑像素

pt

pt（Point），平时用的很少，它的意识就是点（磅）

pt是排版印刷行业字体的常用单位，它是一个真实的物理长度单位，表示72分之一英寸

####　pc

pc 全程为 Picas，表示派卡。

它相当于我国新四号铅字的尺寸，它也是印刷的术语。它和 px 的换算关系如下： 1pc = 16px

cm

cm 其实就是 Centimeters（厘米）

它和 px 的换算关系如下： 1cm = 37.8px

mm

mm顾名思义就是毫米

1mm = 3.78px

in

in其实就是英寸（inches）的缩写

1in = 96px

相对单位em和rem

em和rem是相对于字号来计算尺寸的单位

先说em，它是相对于父元素的字体来做计算的，但如果当前元素自身就设置了字体大小，那就根据自身的字体来做计算，比如说下面这段代码：

px-box这个元素的宽高设置的是1em，同时又设置了font-size是20px，那么宽高计算出来就是1*20=20px

如果你不给它的父元素设置字体大小，它会一直往上找，如果找不到字体大小，那就按浏览器默认的字体大小16px来算

然后再说rem，rem和em相比就是多了一个r，这个r的意思就是root（根元素）的意思，所谓根元素就是html元素

也就是说，以rem作为单位的属性，会去找html元素上面设置的字体大小，然后根据html元素font-size的值计算出最终的rem结果

如果没有给html设置font-size属性，那么就按浏览器的默认font-size来做计算

vw、vh、vmax和vmin

这几个单位就是相对于视窗的单位，也是非常实用的

这里说的视窗指的是可视区域，视窗的尺寸发生变化时，这几个单位的值也会相对发生变化

vw：视窗宽度的百分值，比如说视窗宽度是1200px，那么1vw=1200/100=12pxvh：视窗高度的百分值，比如说视窗高度是800px，那么1vh=800/100=8pxvmax和vmin：vmax代表视窗宽度和高度中相对较大的那个百分值，vmin代表视窗宽度和高度中相对较小的那个百分值，比如视窗宽1200px高800px，那么vmax就等于1200/100=12px，vmin就等于800/100=8pxex和ch

这两个单位我没使用过，我摘一段描述放在这里供大家参考：

ex 和 ch 都是排版用的单位，它们的大小取决于元素的font-size 和 font-family属性

ex 指的是所用字体中小写字母 x 的高度。因此，如果两个字体不一样，那么 ex 的值是不一样的。因为每种字体的小写 x 的高度是不一样的

ch 和 ex 类似，不过它是基于数字 0 的宽度计算的。会随着字体的变化而变化。而0 的宽度通常是对字体的平均字符宽度，它是一个估计值。由于 ch 是一个近似等宽的单元，所以在设置容器的宽度时很有用，比如一个容器想要显示指定个数的字符串时，就可以使用这个单位