CSS 数据类型有哪些？怎么用？
CSS 数据类型定义了可用于各种 CSS 属性的值类型。每种 CSS 属性都期望特定类型的值，理解这些数据类型对于正确样式化和格式化网页内容至关重要。
下面列出的类型是最常见的，但并非任何 CSS 规范中定义的所有类型的完整列表。
语法
selector { property: <unit-data-type>; }CSS 语法使用不等号“<”和“>”之间的关键字来表示数据类型。
文本数据类型
这些类型包括关键字、标识符、字符串和 URL。
预定义关键字
表示特定于所使用属性的预定义关键字（例如，auto、inherit、none）。
CSS 全局关键字
下表列出了所有 CSS 全局关键字：
| 属性 | 描述 |
|---|---|
| <custom-ident> | 用户定义的标识符，例如使用 grid-area 属性指定的名称。 |
| <dashed-ident> | 使用 CSS Custom Properties，<custom-ident> 以两个连字符开头。 |
| <string> | 已加引号的字符串，例如 content 属性的值。 |
| url() | 对资源的引用，例如 background-image 的值。 |
数值数据类型
这些数据类型表示数量、索引和位置。下表列出了所有数值数据类型：
| 属性 | 描述 |
|---|---|
| <integer> | 一个或多个十进制单位（09）。 |
| <number> | 实数可以包含小数部分，例如 1 或 1.54。 |
| <dimension> | 包含单位的数值，例如 23px 或 15em。 |
| <percentage> | 包含百分比符号的数值，例如 15%。 |
| <ratio> | 比率表示为 <number> / <number>。 |
| <flex> | CSS Grid Layout 引入了灵活长度，由带有 fr 单位的 <number> 表示，用于 grid track sizing。 |
量纲
距离和其他量使用这些类型定义。下表列出了所有量纲：
| 属性 | 描述 |
|---|---|
| <length> | 长度是一种表示距离的 dimension。 |
| <angle> | 角度表示为带有 deg、grad、rad 或 turn 单位的 <dimension>，用于 linear-gradient() 等属性。 |
| <time> | 持续时间单位表示为带有 s 或 ms 单位的 <dimension>。 |
| <resolution> | 这是一个带有 dpi、dpcm、dppx 或 x 单位标识符的 <dimension>。 |
类型组合
接受 dimension 和百分比值的 CSS 属性属于此类。百分比值将转换为相对于允许 dimension 的量。接受百分比和 dimension 的属性将使用以下类型之一：
| 属性 | 描述 |
|---|---|
| <length-percentage> | 可以接受 length 或 percentage 值的一种类型。 |
| <angle-percentage> | 可以接受 angle 或 percentage 值的一种类型。 |
| <time-percentage> | 可以接受 time 或 percentage 值的一种类型。 |
颜色
与颜色相关的属性定义了<color>数据类型以及其他与颜色相关的类型。
下表列出了所有与颜色相关的数据类型：
| 属性 | 描述 |
|---|---|
<color> | 以关键字或数值表示的颜色。 |
<color-interpolation-method> | 确定在不同<color>值之间创建过渡时使用的颜色空间。 |
<hex-color> | 描述使用主要颜色分量（红、绿、蓝）以十六进制数字表示的sRGB颜色的十六进制颜色语法，以及其透明度。 |
<system-color> | 通常与网页上不同组件的默认颜色选择相关联。 |
<alpha-value> | 表示颜色的透明度。值可以是<number>（0 为完全透明，1 为完全不透明）或<percentage>（0 为完全透明，100% 为完全不透明）。 |
<hue> | 为<absolute-color-functions>组件定义色轮的<angle>，可以使用 deg、grad、rad、turn 等单位，或无单位的数字（解释为 deg）。 |
<hue-interpolation-method> | 确定用于hue值之间插值的算法。此方法指定基于色轮如何在两个 hue 值之间找到中点。它是<color-interpolation-method>数据类型的一个组件。 |
<named-color> | 在语法中指定为<ident>，通过名称如 red、blue、black 或 light green 来描绘颜色。 |
图像
CSS Images 规范定义了与图像相关的数据类型，例如渐变。下表列出了所有与图像相关的数据类型：
| 属性 | 描述 |
|---|---|
<image> | 指向图像或颜色渐变的 URL。 |
2D 定位
下表列出了所有与 2D Positioning 相关的数据类型：
| 属性 | 描述 |
|---|---|
<position> | 通过提供关键字值（如 top 或 left）或<length-percentage>来确定对象区域的位置。 |
计算数据类型
CSS 数学函数在计算中使用这些数据类型。下表列出了所有计算数据类型：
| 属性 | 描述 |
|---|---|
<calc-sum> | 计算是由加法（+）和减法（-）运算符分隔的一系列计算值。此数据类型要求两个值都包含单位。 |
<calc-constant> | 定义 CSS 关键字，用于数值常量如 e 和 π，这些常量可用于 CSS 数学函数。 |
显示
下表列出了所有与 display 相关的数据类型：
| 属性 | 描述 |
|---|---|
<display-box> | 确定元素是否创建 display boxes。 |
<display-inside> | 确定元素的内部显示，指定非替换元素的格式化上下文类型。 |
<display-internal> | 确定内部显示值，这些值仅与特定布局模型相关。 |
<display-legacy> | CSS 2 中display属性使用单关键字语法，需要为同一布局模型的块级和内联级变体使用单独的关键字。 |
<display-listitem> | 关键字list-item使元素生成一个::marker伪元素，其内容由 list-style 属性指定，并为其自身内容生成指定类型的主框。 |
<display-outside> | 元素的外部display类型，在流布局中至关重要，由<display-outside>关键字确定。 |
其他数据类型
下表列出了一些其他数据类型：
| 属性 | 描述 |
|---|---|
| <absolute-size> | 在 font shorthand 和 font-size 属性中定义绝对字体大小。 |
| <basic-shape> | 定义用于 clip-path、shape-outside 和 offset-path 等属性的不同形状。 |
| <blend-mode> | 指定元素重叠时应使用的颜色模式。 |
| <box-edge> | 定义不同的盒子边缘，例如content-box和border-box。 |
| <easing-function> | 控制元素在两种状态之间过渡或动画的速度。 |
| <filter-function> | 表示一种图形效果，它会改变输入图像的外观。 |
| <generic-family> | 表示通用字体家族的关键字值。 |
| <gradient> | 演示两种或多种颜色之间的渐进过渡。 |
| <ident> | 表示用作标识符的任意字符串。 |
| <line-style> | 指定线条在特定上下文中如何显示或不显示的内容包含在<line-style>枚举值类型中。 |
| <overflow> | 与简写属性overflow以及长手属性 overflow-block、overflow-inline、overflow-x 和 overflow-y 相关的关键字值由枚举值类型<overflow>表示。 |
| <relative-size> | 定义相对于父元素计算大小的相对大小。 |
| <transform-function> | 变换函数负责在二维 (2D) 和三维 (3D) 空间中旋转、缩放（调整大小）、倾斜（扭曲）或移动元素。 |