正在加载...
CSS 单位完整参考
本指南提供了 CSS 单位的全面参考，旨在帮助开发者在网页布局、排版、颜色和响应式设计中实现精确控制。开发者可通过本指南快速查找各类单位及其用法，并结合实际示例应用于真实项目。内容覆盖了所有 CSS 单位类型，包括绝对长度单位、相对长度单位、视口单位、容器查询单位、百分比单位、角度单位、时间单位、频率单位、分辨率单位、颜色单位、函数单位以及 CSS 网格单位。每一类都按功能分类，便于快速查阅和实际开发中灵活使用。
📊 Absolute Length Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| px | 像素 - 设备像素 | 1px = 1/96 inch | width: 300px | 屏幕布局、边框、阴影 | 所有浏览器 |
| cm | 厘米 | 1cm = 37.8px | margin: 2cm | 打印样式表、物理测量 | 所有浏览器 |
| mm | 毫米 | 1mm = 3.78px | border: 1mm solid | 打印、精确测量 | 所有浏览器 |
| in | 英寸 | 1in = 96px | page-break-after: 2in | 打印布局、大尺寸测量 | 所有浏览器 |
| pt | 点 | 1pt = 1.33px | font-size: 12pt | 排版、打印 | 所有浏览器 |
| pc | 派卡 | 1pc = 16px | line-height: 1.5pc | 印刷排版、列宽 | 所有浏览器 |
| Q | 四分之一毫米 | 1Q = 0.25mm | margin: 4Q | 打印布局、高精度测量 | 现代浏览器 |
📊 Relative Length Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| em | Em 单位 | 父元素字体大小 | font-size: 1.2em | 排版、相对文本间距 | 所有浏览器 |
| rem | 根 em 单位 | 根元素字体大小 | margin: 2rem | 一致间距、可伸缩布局 | IE9+ |
| ex | x 高度 | 当前字体中小写 x 的高度 | line-height: 2ex | 排版、垂直对齐 | 所有浏览器 |
| ch | 字符宽度 | 当前字体中 '0' 的宽度 | width: 40ch | 文本容器、等宽布局 | IE9+ |
| cap | 大写字母高度 | 当前字体中大写字母高度 | margin-top: 1cap | 排版、垂直间距 | 现代浏览器 |
| ic | 表意文字宽度 | CJK 表意文字宽度 | width: 20ic | 东亚排版 | 现代浏览器 |
| lh | 行高 | 元素行高 | margin: 1lh | 垂直节奏、间距 | 现代浏览器 |
| rlh | 根行高 | 根元素行高 | padding: 0.5rlh | 一致垂直间距 | 现代浏览器 |
📊 Viewport Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| vw | 视口宽度 | 视口宽度的 1% | width: 50vw | 全宽布局、响应式设计 | IE9+ |
| vh | 视口高度 | 视口高度的 1% | height: 100vh | 全高区块、Hero 区域 | IE9+ |
| vmin | 视口最小单位 | 视口较小维度的 1% | font-size: 4vmin | 方形元素、响应式排版 | IE9+ |
| vmax | 视口最大单位 | 视口较大维度的 1% | width: 50vmax | 响应式布局、自适应设计 | IE9+ |
| vi | 内联视口 | 视口内联方向的 1% | padding: 2vi | 逻辑属性、国际化布局 | 现代浏览器 |
| vb | 块视口 | 视口块方向的 1% | margin: 3vb | 逻辑属性、书写模式 | 现代浏览器 |
| dvw | 动态视口宽度 | 动态视口宽度的 1% | width: 100dvw | 移动端布局、地址栏处理 | 现代浏览器 |
| dvh | 动态视口高度 | 动态视口高度的 1% | height: 100dvh | 移动全屏、高度动态 UI | 现代浏览器 |
| lvw | 大视口宽度 | 大视口宽度的 1% | max-width: 90lvw | 移动布局、UI 展示状态 | 现代浏览器 |
| lvh | 大视口高度 | 大视口高度的 1% | min-height: 100lvh | 移动布局、最大视口 | 现代浏览器 |
| svw | 小视口宽度 | 小视口宽度的 1% | width: 100svw | 移动布局、UI 隐藏状态 | 现代浏览器 |
| svh | 小视口高度 | 小视口高度的 1% | height: 100svh | 移动布局、最小视口 | 现代浏览器 |
📊 Container Query Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| cqw | 容器查询宽度 | 容器宽度的 1% | width: 50cqw | 基于容器的响应式设计 | 现代浏览器 |
| cqh | 容器查询高度 | 容器高度的 1% | height: 80cqh | 容器布局 | 现代浏览器 |
| cqi | 容器查询内联 | 容器内联尺寸的 1% | padding: 2cqi | 逻辑容器布局 | 现代浏览器 |
| cqb | 容器查询块 | 容器块尺寸的 1% | margin: 1cqb | 块方向容器尺寸 | 现代浏览器 |
| cqmin | 容器查询最小值 | 容器较小维度的 1% | font-size: 3cqmin | 基于容器的排版 | 现代浏览器 |
| cqmax | 容器查询最大值 | 容器较大维度的 1% | border-radius: 2cqmax | 基于容器样式 | 现代浏览器 |
📊 Percentage Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| % | 百分比 | 父元素对应属性 | width: 50% | 灵活布局、响应式设计 | 所有浏览器 |
📊 Angle Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| deg | 度 | 360deg = 完整圆 | transform: rotate(45deg) | 旋转、渐变 | 所有浏览器 |
| grad | 梯度 | 400grad = 完整圆 | transform: rotate(100grad) | 数学计算、渐变 | 所有浏览器 |
| rad | 弧度 | 2π rad = 完整圆 | transform: rotate(1.57rad) | 数学变换 | 所有浏览器 |
| turn | 圈数 | 1turn = 完整圆 | transform: rotate(0.25turn) | 直观旋转、动画 | IE9+ |
📊 Time Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| s | 秒 | 1s = 1000ms | transition-duration: 2s | 动画、过渡 | 所有浏览器 |
| ms | 毫秒 | 1000ms = 1s | animation-delay: 500ms | 精确计时、快速动画 | 所有浏览器 |
📊 Frequency Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| Hz | 赫兹 | 1Hz = 每秒 1 次循环 | CSS 中不常用 | 音频相关属性（未来） | 有限支持 |
| kHz | 千赫兹 | 1kHz = 1000Hz | CSS 中不常用 | 音频相关属性（未来） | 有限支持 |
📊 Resolution Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| dpi | 每英寸点数 | 物理每英寸点数 | @media (min-resolution: 300dpi) | 高 DPI 显示、打印 | IE9+ |
| dpcm | 每厘米点数 | 物理每厘米点数 | @media (min-resolution: 118dpcm) | 公制测量、打印 | IE9+ |
| dppx | 每 CSS 像素点数 | 每 CSS 像素的设备像素 | @media (min-resolution: 2dppx) | Retina 显示、像素比 | IE9+ |
| x | dppx 别名 | 与 dppx 相同 | @media (min-resolution: 2x) | Retina 显示、简化语法 | 现代浏览器 |
📊 Color Units
| Unit | Description | Format | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| \# | 十六进制 | #RRGGBB 或 #RGB | color: #ff0000 | 标准颜色表示 | 所有浏览器 |
| rgb() | RGB 函数 | rgb(r, g, b) | color: rgb(255, 0, 0) | 精确颜色控制 | 所有浏览器 |
| rgba() | 带透明度的 RGB | rgba(r, g, b, a) | background: rgba(255, 0, 0, 0.5) | 透明颜色 | IE9+ |
| hsl() | HSL 函数 | hsl(h, s%, l%) | color: hsl(0, 100%, 50%) | 直观颜色选择 | IE9+ |
| hsla() | 带透明度的 HSL | hsla(h, s%, l%, a) | background: hsla(0, 100%, 50%, 0.5) | 透明 HSL | IE9+ |
| hwb() | HWB 函数 | hwb(h w% b%) | color: hwb(0 0% 0%) | 替代颜色模型 | 现代浏览器 |
| lab() | Lab 函数 | lab(l a b) | color: lab(50% 20 -30) | 感知色彩空间 | 现代浏览器 |
| lch() | LCH 函数 | lch(l c h) | color: lch(50% 40 180) | 圆柱 Lab 色彩空间 | 现代浏览器 |
| oklab() | OKLab 函数 | oklab(l a b) | color: oklab(0.5 0.2 -0.3) | 改进的 Lab 色彩空间 | 现代浏览器 |
| oklch() | OKLCH 函数 | oklch(l c h) | color: oklch(0.5 0.4 180) | 改进的 LCH 色彩空间 | 现代浏览器 |
| color() | Color 函数 | color(space r g b) | color: color(display-p3 1 0 0) | 广色域颜色空间 | 现代浏览器 |
📊 Function Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| 数学计算 | 组合不同单位 | width: calc(100% - 20px) | 混合单位计算 | IE9+ | |
| min() | 最小值 | 返回最小值 | width: min(100px, 50%) | 响应式约束 | 现代浏览器 |
| max() | 最大值 | 返回最大值 | width: max(200px, 50%) | 响应式最小值 | 现代浏览器 |
| clamp() | 限制值 | clamp(min, preferred, max) | font-size: clamp(1rem, 4vw, 2rem) | 响应式限制 | 现代浏览器 |
| attr() | 属性值 | 使用 HTML 属性值 | width: attr(data-width px) | 从 HTML 动态获取 | 有限支持 |
| var() | CSS 变量 | 使用自定义属性 | color: var(--main-color) | CSS 自定义属性 | IE11+（部分），现代浏览器 |
📊 Grid Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| fr | 分数单位 | 可用空间分数 | grid-template-columns: 1fr 2fr | CSS Grid 布局、灵活列 | IE10+（需 -ms-） |
Quick Examples
css
CSS Code
/* 混合绝对与相对单位 */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}
/* 响应式排版 clamp */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}
/* 视口单位全屏布局 */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
/* 容器查询单位组件样式 */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}
/* CSS Grid 分数单位 */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}最佳实践与建议：
使用相对单位（rem, em, %）创建可扩展且易访问的设计。推荐使用 rem 代替 em 以保证设计中的一致间距。谨慎使用视口单位（vw, vh），因为它们不考虑滚动条。可以使用 clamp() 实现响应式排版平滑过渡。利用 calc() 灵活组合单位以创建复杂响应式布局。使用 px 控制边框、阴影及装饰性元素。在支持的浏览器中测试容器查询单位。CSS Grid 中使用 fr 单位可实现灵活直观布局。了解新单位（如 dvh, lvh, svh）的浏览器支持情况。考虑逻辑单位（vi, vb）以适应国际化布局。HSL/HSB 色彩单位方便色彩调整与主题化。为新单位提供老浏览器兼容方案。跨不同设备和屏幕尺寸测试单位组合效果。
🧠 测试您的知识
准备开始
测试您的知识
通过这个互动测验挑战自己，看看你对这个主题的理解程度如何
3
问题
70%
及格要求
∞
时间
∞
尝试次数
📝 说明
- 仔细阅读每个问题
- 为每个问题选择最佳答案
- 您可以随时重新参加测验
- 您的进度将显示在顶部