CSS 中的单位非常丰富，涵盖了长度、颜色、角度、时间、频率等，非常实用。
本文档持续更新，记录 CSS 中的单位。
长度单位
定值单位：
px：像素点数目；
mm cm in q pc pt：不常用的绝对长度单位，不会随设备或屏幕而变化，表示毫米、厘米、英寸、1/4 毫米、派卡（1/6 英寸）、码点（或叫磅，1/72 英寸）；
相对值单位：
%：百分比单位，相对于父级的比例；
如果父级的 height 为 'auto'，子元素的百分比高度无效；
需要注意的是，padding-bottom 和 padding-top 如果用百分比单位，则依赖当前元素的宽度而不是高度。
em：几倍于当前节点字体大小 font-size，例如当前节点 font-size: 24px;，那么 1em=24px，那么 0.5em=12px；
rem：几倍于网页根节点 <html> 字体大小 font-size，如果用在移动端适配的场景，例如设计稿上手机全屏宽度为 750，而代码里写 750rem 即可对应手机全屏宽度，可以设置此 CSS 属性：html { font-size: calc(100vw / 750); }；
ch ex ic：相对于当前字体表现的长度，ch 是数字 “0” 的宽度，ex 是字母 “x” 的高度，ic 是汉字 “水” 的宽度；
rch rex ric：以上三个单位在应用 <html> 元素的 font-size 时所表示的长度，注意兼容性；
lh rlh：等同于当前元素的行高、等同于根元素 <html> 的行高，注意兼容性；
vh：相对于当前视口高度的百分比，100vh 即表示完整的视口高度；vh 这个单位有历史包袱：在 Safari 浏览器上它表示的高度始终会包含顶部地址栏和底部操作栏部分，导致这些 UI 出现时，100vh 的元素无法在视口完整放下，会产生滚动条，苹果明确表示不会修复；此时，可以通过 dvh 来获取真正的视口高度，见下文；
，vw：相对于当前视口宽度的百分比，100vw 即表示完整的视口宽度；
lvh svh dvh：考虑到移动端浏览器的 UI 可能会随着用户的浏览行为而缩回或弹出，现在提供了 lvh（Large vh）和 svh（Small vh）这两个单位来分别表示 “较大”、“较小” 的视口高度；而 dvh（Dynamic vh）表示 “动态实时” 的 vh，注意兼容性；
lvw svw dvw：同上，但是浏览器的视口宽度一般不太会变化，所以这几个单位应用的比较少，注意兼容性；
vmin vmax：前者值始终是视口宽度或高度中较小的值，后者值则是较大的值；
dvmin dvmax：同上，但是是对应单位的 “Dynamic” 版本。
颜色单位
预定义颜色：如 "red"、"green" 等 CSS 内置颜色变量；
#000000 #000：16进制的一串颜色码；
rgb(0, 0, 0)：RGB 三原色表示，三个值取值均为 0~255；
rgba(0, 0, 0, 0)：比 RGB 多一个透明度参数，取值 0~1，表示从透明到完全不透明；
hsl(0, 0, 0)：HSL 是用的色相、饱和度、亮度的颜色表示法；
hsla(0, 0, 0, 0)：比 HSL 多一个透明度参数；
transparent：表示全透明黑色，等同于 rgba(0, 0, 0, 0)；
currentColor：继承当前元素的 color 值，在实现文字 badge 的场合用来当做边框色或者背景色，可以自动适配文字的颜色，比较好用。
其他单位
角度：
数字：表示度数，0~360 取值范围，超出范围则有 -10 等同于 350；
deg grad rad：角度、梯度、弧度三种角度单位，一个 360 角度的圆，它可以分别用 400 梯度、2pi 弧度来表示；
turn：圈数，一个 360 度的圆是 1 turn。
时间：s ms：表示秒和毫秒，时间不能为负值。
频率：Hz kHz：赫兹和千赫兹。
分辨率：dpi dpcm dppx：代表单位长度像素点个数，分别表示英寸点数、厘米点数、像素点数。
CSS 中常用的语法
"字符串" '字符串'：一串字符串，包含引号可用 "\" 来转义；
!important：提高样式的优先级；
@import：引入指定的资源，可以直接接字符串或者 url(...)，注意编码名用双引号，结尾必须有分号；
@media：媒体查询；
@font-face：声明一个字体，尽可能提供 .woff 和 .tff 和 .svg 和 .eot 四种格式；
@page：打印时应用的 CSS；
@keyframes：定义动画的关键帧；
@supports( )：检测是否支持某 CSS。
函数：
calc( )：计算属性，例如 calc(100vh - 80px)，注意这里减号左右的空格不能省略，不然是错误用法；
url( )：url 引用符号，参数是一个表示资源 url 的字符串，建议写引号；
attr(name)：获取元素的属性值，其中的参数 name 表示属性名称，name 不要加引号；
counter( ) counters( )：计数器和重复多次的计数器。