CSS 颜色与度量单位（20160816-0016）

一、颜色表方案

颜色的表现形式主要有三种方式：颜色名称、十六进制代码和十进制代码。

p{
color: red;
}
p{
color: #ff0000;
}
p{
color: rgb(255,0,0);
}

解释：将一个段落内的文字设置为红色，分别采用英文颜色名、十六进制代码、十进制代码。

其中十进制表示方法比较多样化，有四种方案：

函数	说明	示例
rgb(r, g, b)	用 RGB 模型表示颜色	rgb(255, 0, 0)
rgba(r, g, b, a)	同上，a 表示透明度 0~1 中间	rgb(255, 0, 0, 0.5)
hsl(h, s, l)	用 HSL 模型（色相、饱和度和透明度）来表示颜色	hsl(120, 100%, 30%)
hsla(h, s, l, a)	同上，a 表示透明度 0~1 中间	hsl(120, 100%, 30%, 0.5)

二、度量单位

在 CSS 长度设置中，经常需要使用到度量单位，即以什么样的单位设计我们的字体或边框长度。CSS 中长度单位又分为绝对长度和相对长度。

绝对长度指的是现实世界的度量单位，CSS 支持五种绝对长度单位：

单位标识符	说明
in	英寸
cm	厘米
mm	毫米
pt	磅
pc	pica

相对长度指的是依托其它类型的单位，也有五种：

单位标识符	说明
em	与元素字号挂钩
ex	与元素字体的“x 高度”挂钩
rem	与根元素的字号挂钩
px	像素，与分辨率挂钩
%	相对另一值的百分比

#first p{
color: black;
margin: 0;
padding: 0;
background-color: gray;
font-size: 20px;
height: 2em;
}

解释：em 是相对单位，与字号大小挂钩，会根据字体大小改变自己的大小，灵活性高。

#second p{
color: black;
margin: 0;
padding: 0;
background-color: gray;
font-size: 20px;
height: 50px;
}

解释：虽然 px 也是相对单位，但由于和分辨率挂钩，导致它其实变成一个绝对单位了，自然灵活性没有 em 高，但是使用难度低，且大量的开发者习惯性使用它。

#third p{
color: black;
margin: 0;
padding: 0;
background-color: gray;
font-size: 200%;
height: 50px;
width:50%;
}

解释：％ ，长度挂钩它所在区块的宽度，而 font-size则是继承到的原始大小的百分比。

示例代码地址