携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情
前言
书写 CSS 样式其实就是在组合 CSS 属性和给属性设置合理的值。例如，给一端文本设置一个字体颜色：
.text {
color : red
}
代码中 color 为属性， red 为值。
本文整理了 CSS 中常用的用于控制长度的属性和值，以及常用的颜色分类。
长度属性
1. 长度属性
在 CSS 中有很多属性是用来控制位置和尺寸的，所以它们的值必须是一个表示长度的数值，而数值是需要添加单位的。
CSS中有两种长度单位——绝对长度单位和相对长度单位。
我们需要知道它们之间的区别， 以便合理的利用它们来控制元素的尺寸大小。
2. 绝对长度单位
绝对长度单位的所渲染的大小是固定的，不受其他因素影响。
这些绝对长度单位中， 除了 px像素 经常使用外， 其他并不常用。
3. 相对长度单位
相对长度单位相对于其他一些东西生效的， 比如父元素的字体大小， 或者视口的大小。
使用相对单位的好处是， 经过一些仔细的规划， 您可以使文本或其他元素的大小与页面上的其他内容相对应。
以下列出了常见相对单位。
| 单位 | 含义 |
|---|---|
| em | 在font-size中使用是相对于父元素的字体大小， 在其他属性中使用是相对于自身的字体大小 |
| ex | 字符“x”的高度 |
| ch | 数字“0”的宽度 |
| rem | 根元素的字体大小 |
| lh | 元素的line-height |
| vw | 视窗宽度的1% |
| vh | vh 视窗高度的1% |
| vmin | 当前vw和vh中较小的一个值 |
| vmax | 当前vw和vh中较大的一个值 |
一般在移动端布局中会经常使用 rem 和 vw、wh。其他的比较少用。
颜色分类
1. 颜色
在CSS中指定颜色的方法有很多， 其中一些是最近才实现的。
在CSS中，相同的颜色值可以在任何地方使用， 无论您指定的是文本颜色、 背景颜色还是其他颜色。
现代计算机的标准颜色系统是24位的， 它允许通过不同的红、 绿、 蓝通道的组合显示大约1670万种不同的颜色， 每个通道有256个不同的值(256 x 256 x 256 = 16,777,216)。
接下来看看在CSS中指定颜色的一些方法。
2. 颜色关键词
可以直接在代码中使用颜色单词进行赋值， 例如： color : red。
这是最常用的指定常用颜色的方式。
3. RGB颜色
在CSS中， 可以使用 rgb(red, green, blue) 将颜色指定为 RGB值。
每个参数 (red、 green、 blue) 定义了 0 到 255 之间的颜色强度。
要显示黑色， 请将所有颜色参数设置为 0， 如： rgb(0, 0, 0)；
要显示白色， 请将所有颜色参数设置为 255， 如： rgb(255, 255, 255)。
4. HEX颜色
在CSS中， 可以使用形如 #rrggbb 格式的十六进制值指定颜色。
其中 rr（红色） 、 gg（绿色） 和 bb（蓝色） 是介于 00 和 ff之间的十六进制值（与十进制 0-255 相同） 。
小结
本文介绍了 CSS 中常用的长度单位以及颜色值的表示方式。
