CSS 中的单位非常丰富，涵盖了长度、颜色、角度、时间、频率等，非常实用。一般来说，现在前端开发中比较重要的是长度单位中的 em 和 rem；而 vh、vw 等可以当做相对于屏幕长宽的百分比，效果优秀，可惜 兼容性不敢恭维，用途受限。
长度单位
绝对单位：
px：像素点数目；
mm cm in q：不常用的长度单位，表示毫米、厘米、英寸、1/4 毫米长度；
pt pc：不常用的长度单位，用于印刷业，表示码点、派卡。
相对单位：
%：百分比单位，相对于父级的比例；
如果父级的 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：相对于当前字体表现的长度，ch 是数字 “0” 的宽度，ex 是字母 “x” 的高度；
vh vw：相对于当前视口大小，100vh=视口高度，100vw=视口宽度，注意 100vh 在 Safari 浏览器上会存在问题；
vmin vmax：前者值始终是视口宽/高中较少的值，后者值则是较大的值。
颜色单位
预定义颜色：如 "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：嵌入 HTML 文档的字体，尽可能提供 .woff 和 .tff 和 .svg 和 .eot 四种格式；
@page：打印时的设置；
@keyframes：定义一个动画；
@supports( )：检测是否支持某 CSS。
函数：
calc( )：计算属性，支持加减乘除四种运算，注意运算符两侧必须用空格；
url( )：url 引用符号，参数是一个表示资源 url 的字符串，建议写引号；
attr(name)：获取元素的属性值，其中的参数 name 表示属性名称，name 不要加引号；
counter( ) counters( )：计数器和重复多次的计数器。