在讨论CSS单位之前，先列一下CSS的值类型：
- 数值: 长度值，用于指定例如元素宽度、边框（border）宽度或字体大小；以及无单位整数。用于指定例如相对线宽或运行动画的次数。
- 百分比: 可以用于指定尺寸或长度——例如取决于父容器的长度或高度，或默认的字体大小。
- 颜色: 用于指定背景颜色，字体颜色等。
- 坐标位置: 例如，以屏幕的左上角为坐标原点定位元素的位置。
- 函数: 例如，用于指定背景图片或背景图片渐变。
下面是各种单位类型：
数值
数值单位分绝对单位和相对单位。绝对单位是不会因为其他设置而变化的单位值，而相对单位可以会因为当前元素的字体或视口大小而变。
绝对单位：px（像素）、mm、cm、in（英寸）、pt（点，相当于1/72英寸）
相对单位：em、rem、vw、vh
em是相对与当前父元素字号的大小，因此会有继承特性，例如当前元素字体大小是10px，则1em=10px。
rem是相对与根元素（<html>）字号的大小，一般浏览器默认是16px，因此1rem=16px，除非修改html标签的font-size，不然都是1:16。
vw是相对与当前视口宽度的1/100，vh相对与当前视口高度的1/100，所以100vw等于元素等于视口宽度，而50vh则是视口高度的一半。
百分比
百分比一般用来指定一个元素大小相对与父元素一定比例，若父元素变化则该元素也会变化并保持一定比例。当然也可以对字体使用百分比，效果类似于em和rem这种。
颜色
颜色可以有关键词、16进制值、RGB/HSL表示法。
关键词：red、blue、green、yellow、black、white等
h1{
background-color: red;
}
16进制值，使用#作为前缀，后面跟6个16进制数，每个大小从0~F，每两个组成一组一共三组，每组16进制数组成的是一个0~255大小的数值，按顺序分别是红、绿和蓝的颜色数值。
p {
color: #ff0000;
}RGB表示法，就是一个rgb(x,y,z)函数来传参，形参x、y和z都是0~255大小的数值，按顺序分别代表红、绿和蓝的颜色值，例如红色为：
p {
color: rgb(255, 0, 0);
}HSL表示法，与16进制和RGB表示法一样，可以表示1670万种颜色，它是一个hsl(x,y,z)函数来传参，x、y和z分别是色调、饱和度以及明度。
- 色调：颜色的底色调。这个值在0到360之间，表示色轮的角度。
- 饱和度：饱和度是多少？这需要一个从0-100%的值，其中0是没有颜色（它将显示为灰色），100%是全彩色饱和度。
- 明度：颜色有多亮或明亮？这需要一个从0-100%的值，其中0是无光（它会出现全黑的），100%是充满光的（它会出现全白）。
同样用hsl表示红色：
p {
color: hsl(0,100%,50%);
}
另外，除了RGB和HSL外，还有些颜色需要表示透明度，可以使用RGBA和HSLA，多了一个参数A，这里的A代表透明度transparency ，一般叫alpha通道，它使用0~1来表示，0表示完全透明，1表示完全不透明，所以半透明相对就是0.5，所以红色半透明就是：
p {
color: rgba(255, 0, 0, 0.5);
}除了函数RGBA和HSLA外，还有一个CSS属性可以用来单独指定“不透明度”——opacity，同样是0~1来表示，0表示完全透明，1表示完全不透明。opacity相对与rgba/hsla里的透明值a来说，使用范围更大，它对所筛选元素的背景、字体都产生影响。
函数
其实上面的rgb/rgba/hsl/hsla都是函数，另外还有各种变化函数：图片路径url、旋转rotate、位移translate等。
div{
background-image: url('myimage.png');
}