【不同的CSS】一文让你了解CSS中的各类单位

【不同的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 貌似支持变量了，有时间研究一下