单位就是那个形容长度大小的东西。比如身高180cm(厘米)，cm就是单位。
css 也不例外，要描述一个盒子的大小，就必须要用到单位。
css 单位根据其作用分为几大类：绝对单位、相对单位、视口单位、角度单位、时间单位、网格单位、频率单位、分辨率单位。
动态计算单位
认识单位之前，先认识几个动态计算函数，这东东的用法可强大了，后续再介绍。
-
calc()动态计算值（如
width: calc(100% - 20px)） -
min()取最小值（如
width: min(100%, 500px)） -
max()取最大值（如
width: max(50%, 300px)） -
clamp()限制在范围（如
font-size: clamp(1rem, 2.5vw, 2rem)）
绝对单位
绝对单位的大小固定不变，与屏幕或设备无关，适合精确控制。例如一个长宽20像素的盒子，不管是在电脑上还是手机中，其大小就是20px。
需要注意系统缩放，分辨率2560x1440的笔记本电脑，如果缩放100%，其宽度还是2560像素；如果缩放150%，其宽度将变为2560÷1.5=1706.66。。
同一个20像素，在缩放100%和缩放150%肉眼看到的大小是不一样的。
-
px（像素）最常用单位，1px = 1屏幕像素（非物理像素），适合固定尺寸元素（边框、图标）
-
cm（厘米）实际物理尺寸（1cm ≈ 37.8px），多用于打印样式
-
mm（毫米）同厘米，但更精细（1cm = 10mm）
-
in（英寸）1in = 2.54cm ≈ 96px
-
pt（点）印刷单位，1pt = 1/72英寸 ≈ 1.33px
-
pc（派卡）印刷单位，1pc = 12pt ≈ 16px
cm 、 mm 、 in 、 pt 、 pc 这些单位主要用于打印和其他需要精确尺寸的场合。
相对单位
相对单位的大小基于其他参考值（父元素、视口、字体大小等），适合响应式设计。
相对单位必须要找一个老六，老六的大小就是他的标准。
-
em相对于当前元素的字体大小，1em等于当前元素的字体大小。如果父元素有font-size属性，则子元素的em值是根据父元素的字体大小计算的。适用于创建可以相对于用户设定的字体大小缩放的布局。
-
rem相对于根元素（html元素）的字体大小，1rem等于根元素的字体大小。使用rem单位可以方便地进行响应式布局，同时避免em单位的嵌套导致的复杂计算问题。
-
%相对于父元素的尺寸，例如width: 50%表示元素宽度为父元素宽度的50%。
-
ch相对于当前元素的字体宽度，1ch = 当前字体中 "0" 字符的宽度，适合文本排版对齐。
-
ex相对于当前字体的x高度，1ex等于当前字体的x高度，使用较少。
视口单位
视口单位就是相对于浏览器窗口的宽度或高度，它与屏幕或设备无关，只与浏览器的可视窗口有关。
-
vw视口宽度的1%（50vw = 视口宽度的一半）。
-
vh视口高度的1%。
-
vmin取视口宽高中较小的1%（如竖屏手机中相当于vw）。
-
vmax取视口宽高中较大的1%。
-
svh/lvh区分短视口（
svh）和完整视口（lvh），解决移动端浏览器地址栏遮挡问题。
角度单位
对头，就是那个三角函数中的角度，弧度。
-
deg（度数）表示角度，用于控制旋转和变形。
-
rad（弧度）表示弧度，用于控制旋转和变形。
-
grad（梯度）表示梯度，用于控制旋转和变形。
-
turn（圈数）表示旋转的圈数，用于控制旋转和变形。
时间单位
多用于控制持续时间，如动画。
-
s（秒）用于控制动画和过渡的时间长度。
-
ms（毫秒）用于控制动画和过渡的时间长度，是秒的千分之一。
网格单位
用于网格布局，就是 Grid。
fr
表示网格容器剩余空间的一部分，用于网格布局。
频率单位
嘿...这个真不常见。
-
Hz（赫兹）表示频率，用于控制动画和音频的播放速度。
-
kHz（千赫兹）表示千赫兹，是赫兹的千倍，用于控制音频的播放速度。
分辨率单位
用于打印媒体查询，没见过~~
-
dpi（每英寸点数）表示每英寸的点数，用于控制图片大小和清晰度。
-
dpcm（每厘米点数）表示每厘米的点数，用于控制图片大小和清晰度。
-
dppx（每像素点数）表示每像素的点数，用于控制图片大小和清晰度。
常用单位
这么多单位，可不是每个都会使用的，一般常用的也就几个，如下：
-
px边框、固定尺寸图标、微小间距。
-
%容器宽度、高度（相对于父元素）。
-
rem字体大小、间距、布局尺寸。
-
vw/vh全屏布局、响应式字体/元素。
-
frCSS Grid 布局中的弹性列宽。
-
calc()动态计算尺寸（如 calc(100% - 20px)。
-
clamp()流体响应式设计（如字体、容器尺寸）。
总结
-
核心掌握：
px、%、rem、vw/vh、fr、calc()、min()、max()、clamp()。 -
了解即可：
em、vmin/vmax、ch。 -
特殊场景备用：
svh/lvh、ex。 -
无需深究：
cm、mm、in、pt、pc。