属性与值是CSS的核心。

上次讲到了CSS属性的分类(《CSS 属性分类》)，这篇文章讲一下CSS值的分类，以及值分类下面的单位的区别。

CSS值的数据类型分为数值类型、标识符类型、字符串类型、变量类型、函数类型五种。

数值类型

数值类型又分为不带单位的数值和带单位的数值两类。

不带单位的数值

比如opacity、z-index、百分比长度等

带单位的数值

带单位的数值指的就是长度，它分为绝对长度单位和相对长度单位

绝对长度单位

• cm：厘米(1cm = 37.8px)
• mm：毫米
• Q：四分之一毫米
• in：英寸(1in = 96px)
• pc：派卡
• pt：点
• px：像素

相对长度单位

• em：在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
• ex：字符“x”的高度
• ch：数字“0”的宽度
• rem：根元素的字体大小
• lh：元素的行高
• rlh：根元素的行高
• vw：视口宽度的 1%
• vh：视口高度的 1%
• vmin： 视口较小尺寸的 1%
• vmax：视口大尺寸的 1%
• vb：在根元素的块向上，初始包含块的尺寸的 1%
• vi：在根元素的行向上，初始包含块的尺寸的 1%
• svw：视口较小尺寸的宽度的 1%
• svh：视口较小尺寸的高度的 1%
• lvw：视口大尺寸的宽度的 1%
• lvh：视口大尺寸的高度的 1%
• dvw：动态视口的宽度的 1%
• dvh：动态视口的高度的 1%

标识符类型

CSS中的标识符有很多，比如下面这些：

1. 颜色值关键字：red、green、blue、black、white、(#)十六进制代码等
2. 字体关键字：serif、sans-serif、monospace、cursive等
3. 文本对齐关键字：left、right、center、justify等
4. 背景属性关键字：transparent、repeat、no-repeat、cover等
5. 边框属性关键字：solid、dashed、dotted、double等
6. 定位属性关键字：absolute、relative、fixed等
7. 显示属性关键字：block、inline、inline-block、none等
8. 清除浮动关键字：clear、both等
9. ......

字符串类型

CSS中这种类型的值很少，常见的比如font-family的属性值、content的属性值等

变量类型

CSS允许自定义变量，也算一种类型，使用CSS变量需要注意以下几点：

1. 声明变量的时候，变量名前面要加两根连词线（--）
2. 变量值只能用作属性值，不能用作属性名
3. var()函数用于读取变量
4. 同一个 CSS 变量，可以在多个选择器内声明，读取的时候，优先级最高的声明生效，这与 CSS 的"层叠"规则是一致的，且变量的作用域就是它所在的选择器的有效范围
5. 全局的变量通常放在根元素:root里面，确保任何选择器都可以读取它们

函数类型

• abs()：绝对值
• exp()：指数型函数，以数值为参数，返回数学常数 e 的指定次方
• hypot()：指数型函数，返回其参数平方和的平方根
• log()：指数型函数，返回某数的对数
• pow()：指数型函数，返回底数的某数次方的值
• sqrt()：指数型函数，返回某数的平方根
• mod()：返回第一个参数除以第二个参数后剩下的模数，类似于JavaScript的余数运算符(%)
• rem()：返回第一个参数除以第二个参数后剩下的余数，类似于JavaScript的余数运算符(%)
• round()：根据选定的舍入策略返回舍入后的数字
• sin()：介于 -1 和 1 之间的数的正弦值
• acos()：介于 -1 和 1 之间的数的反余弦值
• asin()：介于 -1 和 1 之间的数的反正弦值
• cos()：介于 -1 和 1 之间的数的余弦值
• tan()：介于 −infinity 和 infinity 之间的数的正切值
• atan()：介于 -∞ 和 +∞ 之间的数的反正切值
• atan2()：介于 -infinity 和 infinity 之间的两值的反正切值
• calc()：允许在声明 CSS 属性值时执行一些计算
• clamp()：把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用
• sign()：如果参数的数值为负，则返回-1，如果参数的数值为正，则返回+1，如果参数的数值为0+，则返回0+，如果参数的数值为0-，则返回0-
• symbols()：如果参数的数值为负，则返回-1，如果参数的数值为正，则返回+1，如果参数的数值为0+，则返回0+，如果参数的数值为0-，则返回0-
• max()：可以从一个逗号分隔的表达式列表中选择最大的值作为属性的值
• min()：可以从一个逗号分隔的表达式列表中选择最小的值作为属性的值
• fit-content()：将给定大小夹紧为可用大小，根据公式 min(maximum size, max(minimum size, argument))
• minmax()：定义了一个长宽范围的闭区间，它与CSS 网格布局一起使用
• attr()：用来获取选择到的元素的某一 HTML 属性值
• counter()：返回一个代表计数器的当前值的字符串
• counters()：返回表示指定计数器当前值的连接字符串
• cross-fade()：用于以定义的透明度混合两个或多个图像
• element()：定义了一个从任意的 HTML 元素中生成的图像 <image> 值
• env()：将用户代理定义的环境变量值插入你的 CSS 中
• rgb()：用于设置颜色，接受三个参数，分别代表红、绿、蓝三原色的值，取值范围是0-255
• rgba()：用于设置颜色，接受四个参数，前三个参数与rgb()相同，第四个参数是透明度，取值范围是0-1
• hsl()：用于设置颜色，接受三个参数，分别代表色相、饱和度和亮度，取值范围是0-360、0%-100%、0%-100%
• hsla()：用于设置颜色，接受四个参数，前三个参数与hsl()相同，第四个参数是透明度，取值范围是0-1
• linear-gradient()：用于创建线性渐变的背景色或背景图片
• radial-gradient()：用于创建径向渐变的背景色或背景图片
• path()：接受一个SVG路径字符串，在CSS形状和CSS运动路径中使用，用于绘制形状
• ray()：定义动画元素可以遵循的偏移路径线段
• repeat()：表示轨道列表的重复片段，横向和纵向都重复
• repeat-x()：相较于repeat()，repeat-x()表示横向重复，纵向不重复
• rotate()：用于旋转元素，可以设置旋转角度
• scale()：用于缩放元素的大小，可以设置水平和垂直方向的缩放比例
• skew()：用于扭曲元素，可以设置水平和垂直方向的扭曲角度
• translate()：用于移动元素，可以设置水平和垂直方向的偏移量
• url()：指向一个资源
• var()：可以插入一个自定义属性（CSS 变量）的值，用来代替非自定义属性中值的任何部分

总结

数值类型、标识符类型是CSS属性值最常用的类型，变量类型、函数类型是CSS属性值功能最强的类型。

JavaScript可以读取CSS变量，所以，CSS 变量提供了 JavaScript 与 CSS 通信的一种途径。