[快速入门前端 20] CSS：长度单位与颜色

CSS 长度单位

在生活中我们有许多用于表示大小的单位，例如公里、公尺等，那在网页中我们又要如何指定元素或文字的大小呢？
其实在网页开发中也有许多长度单位，主要分为两种：绝对单位及相对单位。

绝对单位：表示真实世界一个确切的尺寸，例如 cm (公分)、mm (毫米)、px (像素) 等相对单位：基于其他属性所计算出来的长度，例如 em、rem、% (百分比)、view 等

绝对单位

cm 公分
等同于现实中的的公分单位，通常用于需要列印的网页，较少用于开发。
mm 毫米
等同于现实中的的毫米单位，较少用。
px (pixel) 像素
pixel (像素) 是最常用的单位之一，指的是萤幕上的一个个小光点，例如萤幕解析度为 2560×1664，就会有 2560x1664 个小点。所以 px 虽然是一个绝对单位，却会因为设备不同造成实际大小不同。

相对单位

em
是 emphasize 的缩写，指相对于当前元素 font-size (文字大小) 的倍数，假设 font-size 为 20px，则 1em = 20px, 2em = 40px。若当前元素没有设定 font-size ，浏览器会一层一层往父元素上找，如果每一层都没有则使用浏览器预设 font-size (通常是 16px)。

rem
rem 又称为 root em，指相对于根元素 (html) font-size 的倍数，也就是说只要在 html 上设定字体大小，所有的 rem 都可以参考它进行大小设定，解决了 em 设计不良时牵一髮而动全身的缺点。

% 百分比
指相对其父元素大小的百分比。

範例：
父元素长宽为 400px x 400px，子元素设为 50% x 50%，则子元素长宽为 200px x 200px

.dad {    background-color: rgb(254, 197, 197);    width: 400px;    height: 400px;}.dad>div {    width: 50%;    height: 50%;    background-color: aqua;}

<div class="dad">    <div></div></div>

view 系列
view 系列表示与当前视窗的分为 view height(vh)、view width(vw)、min view(vmin)、max view(vmax) 四种。

vh(view height)：指对浏览器视窗高度的比例，50vh 等于浏览器高度的 50%，也就是一半高vw(view width)：指对浏览器视窗宽度的比例，50vw 等于浏览器宽度的 50%vmin：指对浏览器较小边的比例，若浏览器宽度 > 高度，则 50vmin 就是 50vh (选较小的作为单为)vmax：指对浏览器较大边的比例，若浏览器宽度 > 高度，则 50vmax 就是 50vw (选较大的作为单为)

整理

单位种类说明 cm   绝对单位  公分mm绝对单位毫米px绝对单位像素，设备不同实际大小可能不同em相对单位基于当前元素 font-size 的倍数rem相对单位基于根元素 (html) font-size 的倍数%相对单位基于父元素的百分比vh相对单位基于当前视窗高度的百分比，50vh = 视窗高度的 50%vw相对单位基于当前视窗宽度的百分比vmin相对单位基于视窗最小边的百分比vmax相对单位基于视窗最大边的百分比

颜色的表示方法

我们前面在设定颜色时，大部分都以颜色名称来设定，例如 color: red;，这种方式确实可以达到改变颜色的目的，但对于複杂的网页来说是远远不够的，所以今天我们来介绍常见的颜色表示方法。

颜色名称：为了方便，CSS 有多种定义好的颜色名称，例如 red、blue 等颜色值：分为 HEX、RGB、HSL 三种表示方法，可以精準的定义颜色关键字：transparent、currentColor 等

颜色名称

是最简单直觉的写法，颜色名称不分大小写，直接以值的形式写在需要设定颜色的地方，在 MDN 中有完整的颜色名称对照表可参考。

HEX

HEX 是最常见的颜色表示方法，由 # 符号和十六进制组合而成，例如 #c9c9c9。

RGB

RGB 分别代表红(red)、绿(green)、蓝(blue)，书写格式为 rgb(0, 0, 0)括号里三个数值分别表示红绿蓝三个颜色的强度，範围为 0 ~ 255。
若需要设定颜色透明度时，可以在 rgb 后面加 alpha 设定透明度，透明度的範围为 0.0 ~ 1.0，0 为完全透明 (看不到)，1 为完全不透明，写为 rgba(0, 0, 0, 1)。

HSL

HSL 分别表示色调、饱和度、亮度，色调的範围为 0 ~ 360；饱和度为 0% ~ 100%，越低则颜色越灰；亮度与饱和度相同，以百分比表示，越高则颜色越亮，0% 为黑色，100% 为白色。
与 RGB 相同，HSl 后面也可以加入透明度，写为 hsla(0, 0, 0, 0.5) (0.5 为半透明)

transparent

指「透明」，表示完全透明颜色的快速写法，用法为 color: transparent;

currentColor

指「当前的 color 值」，可以将其他需要设定颜色的属性，例如边框、背景等颜色与 color 统一，写法为 border-color: currentColor;。

---

上一篇：[快速入门前端 19] CSS 三大特性：层叠性、继承性、优先级
下一篇：[快速入门前端 21] CSS 常见属性(1) 字体样式和颜色
系列文章列表：[快速入门前端] 系列文章索引列表