【不一样的CSS】一文让你了解CSS中的各种单位
若彼岸繁华落尽，谁陪我看落日流年
写在前面
对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。
最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。
该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏)
CSS 中的单位大体分为一下三种：
- 绝对单位: 不会因为其他元素的尺寸变化而变化。
- 相对单位: 没有一个固定的度量值，而是由其他元素尺寸来决定的相对值。
- 其他单位: 例如角度、颜色等。
在官方文档中只有 绝对单位 和 相对单位，其他单位在 CSS 中也具有单位的功能的值或者函数
绝对单位
CSS 中的绝对单位主要包括以下几种
| 单位 | 名称 |
|---|---|
cm | 厘米 |
mm | 毫米 |
q | 四分之一毫米 |
in | 英寸 |
pc | 十二点活字 |
pt | 点 |
px | 像素 |
不过常用的绝对单位只有 px 像素。剩余的都少使用。
相对长度单位
相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，您可以使文本或其他元素的大小与页面上的其他内容相对应。如下是一些比较常用的相对单位。
| 单位 | 相对于 | 描述 |
|---|---|---|
% | 父元素 | 百分比 |
em | 在 font-size 中使用是相对于父元素的字体大小 | 如果父元素 font-size 是 20px ，那么 2em 就是 40px, em 可精确到小数后3位 |
ex | 字符“x”的高度 | ex 指当前字体环境中小写字母 x 的高度 |
ch | 数字“0”的宽度 | ch 指当前字体环境中数字 0 的宽度 |
rem | 根元素的字体大小 | 如果根元素字体大小时 20px 那么 2rem 就是 40px |
vh | 视窗高度的1% | vh 等于视窗高度的 1/100.例如，如果浏览器的高是 900px, 1vh 求得的值为 9px |
vw | 视窗宽度的1% | vw 同理 |
vmin | 视窗较小尺寸的1% | 视口的宽度和高度中比较小的为 100vmin |
vmax | 视图大尺寸的1% | 视口的宽度和高度中比较大的为 100vmax |
其他单位
角度
关于角度的单位主要包含以下四个
| 单位 | 描述 | 什么时候等于圆 |
|---|---|---|
deg | 度 | 360deg 等于一个圆 |
grad | 梯度 | 400grad 等于一个圆 |
rad | 弧度 | 2πrad 等于一个圆 |
trun | 转 | 1turn 等于一个圆 |
fr 单位
fr 用于分配一定长度内的剩余空间。
颜色
rgb()
RGB是一个简称，全称为 Red-Green-Blue，即红-绿-蓝。RGB 色彩模式是工业界的一种颜色标准，是通过对红、绿、蓝三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。
hsl()
HSL是一个简称，全称为 Hue-Saturation-Lightness，即 色调-饱和度-亮度。HSL 色彩模式是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。
在 CSS 中使用 HSL 色彩模式是通过 hsl(H, S, L) 函数实现的
- H 表示色调(是色彩的基本属性，就是平常所说的颜色名称)，其值范围为 0 ~ 360 之间的一个角度。
- S 表示饱和度(饱和度是指颜色中灰色的含量)，其值范围为 0% ~ 100% 之间的百分值。
- L 表示亮度(亮度 是指颜色中黑色的含量)，其值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色。
rgba()
在原基础上增加a，其中 A 为 alpha 表示透明度。
hsla()
在原基础上增加a，其中 A 为 alpha 表示透明度。
HEX
使用十六进制整数指定颜色
calc() 函数
CSS3 新增了一个 calc() 函数，该函数允许在声明 CSS 属性值时执行一些计算。该函数支持四则运算。(乘法必须有一个乘数是数字，除法中 / 后面的树必须是数字)
calc() 函数还支持嵌套语法。
示例代码如下：
.banner {
width: calc(100% - 80px);
}
嵌套语法
.foo {
--widthA: 100px;
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);
}
原生 CSS 貌似支持变量了，有时间研究一下
