CSS长度和颜色
1. 长度
1.1 像素
像素（px）是指由图像的小方格组成的，这些小格都有一个明确的位置和被分配的色彩数值，小方格颜色和位置就决定该图像所呈现出来的样子
可以将像素视为整个图像中不可分割的单位或者是元素。不可分割的意思是它不能够再切割成更小单位抑或是元素，它是以一个单一颜色的小格存在。每一个点阵图像包含了一定量的像素，这些像素决定图像在屏幕上所呈现的大小，也就是说，显示器屏幕实际上是由一个一个的小点（单位色块，即像素）构成的
1.2 屏幕分辨率
例如，屏幕分辨率是1920×1080，则该屏幕水平方向有1920个像素，垂直方向有1080个像素
- 不同屏幕的像素大小是不同的，也就是说像素大小不像我们现行的长度单位（如米/m）那样有着固定的国际标准
- 所以同样的像素大小在不同的设备上显示效果是不一样的，像素越小的屏幕显示的效果越清晰
1.3 图像分辨率
例如，一张图片分辨率是300x200，则该图片在屏幕上按1:1缩放时，水平方向有300个像素，垂直方向有200个像素点
- 图片分辨率越高，1:1缩放时面积越大
- 图片分辨率越低，1:1缩放时面积越小
同一台设备像素大小是不变的，那把图片放大超过100%时占的像素点就多了，但是图像也会变得模糊
1.4 百分比
将属性值设置为相对于其父元素属性的百分比，可以使子元素跟随父元素的改变而改变
1.5 em
em是相对于元素的字体大小来计算的，1em = <self>.font-size，也就说em值会根据元素本身的字体大小的改变而改变
1.6 rem
rem是相对于根元素的字体大小来计算，1em = <root>.font-size，也就说em值会根据根元素的字体大小的改变而改变
2. 颜色
2.1 颜色名
编写方式：直接使用颜色对应的英文单词，编写比较简单
如：
- 红色：red
- 绿色：green
- 蓝色：blue
- 紫色：purple
- 橙色：orange
- 灰色：gray
2.2 rgb或rgba
编写方式：使用红、黄、蓝这三种光的三原色进行组合
r 表示红色， g 表示绿色， b 表示蓝色， a 表示透明度
例：
/* 使用 0~255 之间的数字表示一种颜色 */
color: rgb(255, 0, 0);/* 红色 */
color: rgb(0, 255, 0);/* 绿色 */
color: rgb(0, 0, 255);/* 蓝色 */
color: rgb(0, 0, 0);/* 黑色 */
color: rgb(255, 255, 255);/* 白色 */
/* 混合出任意一种颜色 */
color:rgb(138, 43, 226) /* 紫罗兰色 */ color:rgba(255, 0, 0, 0.5);/* 半透明的红色 */
/* 也可以使用百分比表示一种颜色（用的少） */
color: rgb(100%, 0%, 0%);/* 红色 */
color: rgba(100%, 0%, 0%,50%);/* 半透明的红色 */
小规律：
- 若三种颜色值相同，呈现的是灰色，值越大，灰色越浅
- rgb (0, 0, 0) 是黑色， rgb (255, 255,255) 是白色
- 对于 rbga 来说，前三位的 rgb 形式要保持一致，要么都是 0~255 的数字，要么都是百分比
2.3 HEX或HEXA
HEX 的原理同与 rgb 一样，依然是通过：红、绿、蓝色进行组合，只不过要用 6位（分成3组） 来表达，格式为：#rrggbb
每一位数字的取值范围是： 0 ~ f ，即：（ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f ），所以每一种光的最小值是： 00 ，最大值是： ff
color: #ff0000;/* 红色 */
color: #00ff00;/* 绿色 */
color: #0000ff;/* 蓝色 */
color: #000000;/* 黑色 */
color: #ffffff;/* 白色 */
/* 如果每种颜色的两位都是相同的，就可以简写*/
color: #ff9988;/* 可简为：#f98 */
/* 但要注意前三位简写了，那么透明度就也要简写 */ color: #ff998866;/* 可简为：#f986 */
2.4 HSL或HSLA
HSL 是通过：色相、饱和度、亮度，来表示一个颜色的，格式为：hsl(色相,饱和度,亮度)
色相：取值范围是 0~360 度，具体度数对应的颜色如下图
饱和度：取值范围是 0%~100% 。（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有灰）
亮度：取值范围是 0%~100% 。（ 0% 亮度没了，所以就是黑色。 100% 亮度太强，所以就是白色了）
HSLA 其实就是在 HSL 的基础上，添加了透明度