你不知道的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之間。