全栈开发知识库

Kpsmart2025年3月4日大约 8 分钟

我将为您完善 CSS 数据类型参考文档，添加详细的数据类型分类和说明。

---
title: CSS 数据类型参考
icon: css
order: 1
---

# CSS 数据类型参考

CSS 数据类型定义了 CSS 属性可以接受的值的类型。本文档提供了 CSS 数据类型的完整参考。

## 数值类型

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<integer>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/integer) | 整数，不带小数点 | `0`, `1`, `-5`, `100` |
| [`<number>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/number) | 数字，可以带小数点 | `0`, `1.5`, `-5.2`, `100` |
| [`<percentage>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/percentage) | 百分比值 | `50%`, `100%`, `-10%` |
| [`<ratio>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ratio) | 比例值 | `16/9`, `4/3`, `1/1` |
| [`<flex>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex_value) | 弹性值，用于 `fr` 单位 | `1fr`, `2.5fr` |

## 长度单位

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<length>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/length) | 长度值 | `10px`, `2em`, `5rem`, `1vw` |
| [`<length-percentage>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/length-percentage) | 长度或百分比值 | `10px`, `50%`, `calc(100% - 20px)` |

### 绝对长度单位

| 单位 | 名称 | 等价换算 |
|------|------|---------|
| `cm` | 厘米 | 1cm = 96px/2.54 |
| `mm` | 毫米 | 1mm = 1/10cm |
| `in` | 英寸 | 1in = 96px = 2.54cm |
| `px` | 像素 | 1px = 1/96in |
| `pt` | 点 | 1pt = 1/72in |
| `pc` | 派卡 | 1pc = 12pt |

### 相对长度单位

| 单位 | 相对于 | 描述 |
|------|-------|------|
| `em` | 父元素的字体大小 | 在 `font-size` 中使用时，相对于父元素的字体大小；在其他属性中使用时，相对于元素自身的字体大小 |
| `rem` | 根元素的字体大小 | 相对于 `<html>` 元素的字体大小 |
| `ex` | 字体的 x-height | 通常为字体高度的一半 |
| `ch` | 数字 "0" 的宽度 | 基于当前字体的 "0" 字符宽度 |
| `lh` | 元素的行高 | 相对于元素的 `line-height` 属性值 |
| `vw` | 视口宽度的 1% | 相对于视口的宽度 |
| `vh` | 视口高度的 1% | 相对于视口的高度 |
| `vmin` | 视口较小尺寸的 1% | 相对于视口的宽度或高度中较小的那个 |
| `vmax` | 视口较大尺寸的 1% | 相对于视口的宽度或高度中较大的那个 |
| `vi` | 根元素内联轴尺寸的 1% | 在水平书写模式下等同于 `vw` |
| `vb` | 根元素块轴尺寸的 1% | 在水平书写模式下等同于 `vh` |

## 颜色类型

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<color>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value) | 颜色值 | `red`, `#ff0000`, `rgb(255, 0, 0)`, `hsl(0, 100%, 50%)` |
| [`<color-mix>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value/color-mix) | 颜色混合 | `color-mix(in srgb, red, blue)` |

### 颜色关键字

CSS 提供了一系列命名颜色关键字，如 `red`、`blue`、`transparent`、`currentcolor` 等。

### 颜色函数

| 函数 | 描述 | 示例 |
|------|------|------|
| `rgb()` / `rgba()` | RGB 颜色模型 | `rgb(255, 0, 0)`, `rgba(255, 0, 0, 0.5)` |
| `hsl()` / `hsla()` | HSL 颜色模型 | `hsl(0, 100%, 50%)`, `hsla(0, 100%, 50%, 0.5)` |
| `hwb()` | HWB 颜色模型 | `hwb(0 0% 0%)`, `hwb(0 0% 0% / 0.5)` |
| `lab()` | CIELAB 颜色模型 | `lab(50% 50 30)`, `lab(50% 50 30 / 0.5)` |
| `lch()` | CIELCH 颜色模型 | `lch(50% 70 40)`, `lch(50% 70 40 / 0.5)` |
| `oklab()` | Oklab 颜色模型 | `oklab(0.6 0.1 0.1)` |
| `oklch()` | Oklch 颜色模型 | `oklch(0.6 0.15 30)` |

## 图像类型

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<image>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/image) | 图像值 | `url("image.jpg")`, `linear-gradient(red, blue)` |
| [`<gradient>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient) | 渐变值 | `linear-gradient(red, blue)`, `radial-gradient(circle, red, blue)` |

### 渐变类型

| 渐变函数 | 描述 | 示例 |
|---------|------|------|
| `linear-gradient()` | 线性渐变 | `linear-gradient(to right, red, blue)` |
| `radial-gradient()` | 径向渐变 | `radial-gradient(circle, red, blue)` |
| `conic-gradient()` | 锥形渐变 | `conic-gradient(red, yellow, blue)` |
| `repeating-linear-gradient()` | 重复线性渐变 | `repeating-linear-gradient(45deg, red, blue 20px)` |
| `repeating-radial-gradient()` | 重复径向渐变 | `repeating-radial-gradient(circle, red, blue 20px)` |
| `repeating-conic-gradient()` | 重复锥形渐变 | `repeating-conic-gradient(red, blue 30deg)` |

## 位置类型

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<position>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position_value) | 位置值 | `top`, `center`, `50% 50%`, `right 10px bottom 20px` |

## 形状类型

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<basic-shape>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/basic-shape) | 基本形状 | `circle()`, `ellipse()`, `polygon()`, `inset()` |

### 形状函数

| 形状函数 | 描述 | 示例 |
|---------|------|------|
| `circle()` | 圆形 | `circle(50px at center)` |
| `ellipse()` | 椭圆形 | `ellipse(50px 30px at center)` |
| `inset()` | 内嵌矩形 | `inset(10px 20px 30px 40px round 10px)` |
| `polygon()` | 多边形 | `polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)` |

## 时间和频率类型

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<time>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/time) | 时间值 | `1s`, `100ms` |
| [`<frequency>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/frequency) | 频率值 | `1Hz`, `2kHz` |
| [`<angle>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/angle) | 角度值 | `45deg`, `0.25turn`, `1rad`, `1grad` |

### 角度单位

| 单位 | 描述 | 换算 |
|------|------|------|
| `deg` | 度 | 一个完整的圆是 360deg |
| `grad` | 百分度 | 一个完整的圆是 400grad |
| `rad` | 弧度 | 一个完整的圆是 2π rad (约 6.28rad) |
| `turn` | 圈 | 一个完整的圆是 1turn |

## 函数类型

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<calc()>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc) | 计算函数 | `calc(100% - 20px)` |
| [`<min()>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/min) | 最小值函数 | `min(10vw, 100px)` |
| [`<max()>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/max) | 最大值函数 | `max(10vw, 100px)` |
| [`<clamp()>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/clamp) | 区间限制函数 | `clamp(100px, 50%, 300px)` |
| [`<attr()>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/attr) | 属性值函数 | `attr(data-size px)` |
| [`<var()>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/var) | 变量函数 | `var(--main-color, black)` |

## 字符串和标识符类型

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<string>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/string) | 字符串 | `"Hello, world!"`, `'CSS is awesome'` |
| [`<ident>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ident) | 标识符 | `auto`, `none`, `inherit` |
| [`<custom-ident>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/custom-ident) | 自定义标识符 | `my-identifier`, `header`, `sidebar` |
| [`<dashed-ident>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/dashed-ident) | 破折号标识符 | `--my-variable`, `--theme-color` |

## 函数表达式

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<transform-function>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function) | 变换函数 | `rotate(45deg)`, `scale(1.5)`, `translate(10px, 20px)` |
| [`<filter-function>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function) | 滤镜函数 | `blur(5px)`, `brightness(1.2)`, `contrast(150%)` |

## 布局相关类型

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<grid-line>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-line) | 网格线 | `auto`, `1`, `span 2`, `main-start` |
| [`<display-box>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display-box) | 显示盒子值 | `none`, `contents` |
| [`<display-inside>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display-inside) | 内部显示类型 | `flex`, `grid`, `flow-root` |
| [`<display-outside>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/display-outside) | 外部显示类型 | `block`, `inline` |

## 复合类型

| 数据类型 | 描述 | 示例 |
|---------|------|------|
| [`<easing-function>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/easing-function) | 缓动函数 | `linear`, `ease`, `cubic-bezier(0.1, 0.7, 1.0, 0.1)` |
| [`<url>`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/url) | URL 值 | `url("image.jpg")`, `url('https://example.com/font.woff2')` |

## 全局关键字

以下关键字可用于任何 CSS 属性：

| 关键字 | 描述 |
|-------|------|
| `inherit` | 从父元素继承属性值 |
| `initial` | 使用属性的初始值 |
| `unset` | 如果属性是继承的，则行为类似于 `inherit`，否则行为类似于 `initial` |
| `revert` | 重置为浏览器默认样式 |
| `revert-layer` | 重置为上一个级联层中的值 |

## 数据类型组合

CSS 属性通常接受多种数据类型的组合。常见的组合方式包括：

1. **并列组合**：使用空格分隔，表示多个值一起使用，如 `background-position: 10px 20px;`
2. **选择组合**：使用 `|` 分隔，表示可以使用其中之一，如 `<length> | <percentage>`
3. **重复组合**：使用 `+`、`*` 或 `#` 表示重复，如 `<length>+` 表示一个或多个长度值

## 使用示例

```css
/* 长度单位示例 */
.box {
  width: 50%;                /* 百分比 */
  height: 200px;             /* 像素 */
  margin: 1rem;              /* 相对于根元素字体大小 */
  padding: 0.5em;            /* 相对于元素自身字体大小 */
  border-radius: 10px;       /* 像素 */
  font-size: clamp(1rem, 2vw, 2rem); /* 响应式字体大小 */
}

/* 颜色示例 */
.colored {
  color: #ff5733;            /* 十六进制 */
  background-color: rgb(100, 150, 200); /* RGB */
  border: 1px solid hsl(120, 60%, 50%); /* HSL */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* RGBA */
}

/* 位置示例 */
.positioned {
  background-position: right bottom; /* 关键字 */
  transform-origin: center;          /* 关键字 */
  object-position: 50% 50%;          /* 百分比 */
}

/* 形状示例 */
.shaped {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 多边形 */
  shape-outside: circle(50%);                             /* 圆形 */
}

/* 时间和动画示例 */
.animated {
  transition: all 0.3s ease-in-out; /* 时间和缓动函数 */
  animation: fade 2s infinite;      /* 时间和迭代计数 */
}

/* 计算函数示例 */
.calculated {
  width: calc(100% - 40px);        /* 计算 */
  margin: min(20px, 5vw);          /* 最小值 */
  padding: max(10px, 1vw);         /* 最大值 */
  font-size: clamp(1rem, 2vw, 2rem); /* 区间限制 */
}

/* 变量示例 */
:root {
  --main-color: #3498db;
  --secondary-color: #2ecc71;
}

.themed {
  color: var(--main-color);
  border-color: var(--secondary-color);
}

/* 字符串和标识符示例 */
.custom-counter {
  counter-reset: my-counter;
  list-style-type: none;
}

.custom-counter li::before {
  content: "Item " counter(my-counter) ": ";
  counter-increment: my-counter;
}

/* 变换函数示例 */
.transformed {
  transform: rotate(45deg) scale(1.2) translate(10px, 20px);
}

/* 滤镜函数示例 */
.filtered {
  filter: blur(2px) brightness(1.2) contrast(1.4) grayscale(0.5);
}

常见问题与解决方案

单位选择

何时使用相对单位 vs 绝对单位？
- 使用相对单位（如 em、rem、%）创建响应式设计
- 使用绝对单位（如 px）定义固定尺寸元素
响应式排版的最佳实践
- 使用 rem 作为基本字体单位
- 使用 clamp() 创建流体排版
- 示例：font-size: clamp(1rem, 0.5rem + 1vw, 1.5rem);

颜色管理

颜色模型选择
- RGB/RGBA：适用于屏幕显示
- HSL/HSLA：更直观的颜色调整
- LCH/Lab：更好的感知均匀性

颜色变量命名约定

:root {
  /* 功能性命名 */
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --color-accent: #e74c3c;
  
  /* 语义化命名 */
  --color-text: #333333;
  --color-background: #ffffff;
  --color-border: #dddddd;
}

计算函数使用

calc() 注意事项
- 运算符两侧必须有空格
- 可以混合不同单位
- 可以嵌套其他函数
min()/max()/clamp() 最佳实践
- 使用 min() 设置上限
- 使用 max() 设置下限
- 使用 clamp() 设置范围

浏览器兼容性

大多数现代浏览器都支持 CSS 数据类型，但某些新特性可能需要考虑兼容性：

特性	Chrome	Firefox	Safari	Edge
基本数据类型	全部支持	全部支持	全部支持	全部支持
CSS 变量	49+	31+	9.1+	15+
calc()	26+	16+	7+	12+
min()/max()	79+	75+	11.1+	79+
clamp()	79+	75+	13.1+	79+
现代颜色函数	101+	113+	15+	101+

最佳实践

可维护性
- 使用 CSS 变量定义重复使用的值
- 采用一致的命名约定
- 组织相关变量到逻辑组
性能考虑
- 复杂的 calc() 表达式可能影响性能
- 过度使用 CSS 变量可能导致性能问题
- 优先使用简单的数据类型
响应式设计
- 结合 vw/vh 与 min()/max()/clamp() 创建流体布局
- 使用相对单位创建可伸缩界面
- 避免硬编码固定尺寸
可访问性
- 确保颜色对比度符合 WCAG 标准
- 避免仅依赖颜色传达信息
- 考虑用户可能调整文本大小

常见问题与解决方案

单位选择

颜色管理

计算函数使用

浏览器兼容性

最佳实践

相关资源