你不知道的CSS（单位篇）

单位篇

兼容性支持:

IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
9.0+	2.0+	4.0+	3.1+	3.5+	3.2+	2.1+	18.0

一、长度

rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;

vw:相对于视口的宽度。视口被均分为100单位的vw;

vh:相对于视口的高度。视口被均分为100单位的vh;

vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;

vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;

ch:数字0的宽度;

二、角度

deg:度（Degress）。一个圆共360度;

grad:梯度（Gradians）。一个圆共400梯度;

rad:弧度（Radians）。一个圆共2π弧度;

turn:90deg = 100grad = 0.25turn ≈ 1.570796326794897rad,即1turn=1圈=360deg=400grad=2π;

三、颜色

HEX：#RRGGBB 或 #RGB，

RR：红色值。十六进制正整数。

GG：绿色值。十六进制正整数。

BB：蓝色值。十六进制正整数。

RGBA(R,G,B,A)：(A可有可无)

R：红色值。正整数 | 百分数。

G：绿色值。正整数 | 百分数。

B：蓝色值。正整数 | 百分数。

A：Alpha透明度。取值0~1之间。

HSLA(H,S,L,A)：(A可有可无)

H：Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360。

S：Saturation(饱和度)。取值为：0.0% - 100.0%。

L：Lightness(亮度)。取值为：0.0% - 100.0%。

A：Alpha透明度。取值0~1之间。