# CSS Reference

URL: https://caijiao.org/reference/css/
Source: docs/reference/css/index.md
Description: CSS Reference 汇总 flex、grid、position、container query、:has()、clamp() 等现代 CSS 属性、选择器、函数和可运行演示。

CSS Reference 用于快速查询布局、选择器、函数和现代 CSS 能力。这里优先给出能直接复制的写法，并为直观效果提供可运行演示。

## 布局与定位

- [flex](/reference/css/flex)：一维弹性布局，适合横向或纵向排列。
- [grid](/reference/css/grid)：二维网格布局，适合卡片、仪表盘、表格化布局。
- [position](/reference/css/position)：static、relative、absolute、fixed、sticky。
- [container query](/reference/css/container-query)：根据容器尺寸调整组件样式。
- [display](/reference/css/display)：决定元素盒类型和布局上下文。
- [z-index](/reference/css/z-index)：控制层叠顺序。
- [gap](/reference/css/gap)：设置 flex、grid 和多列布局间距。
- [aspect-ratio](/reference/css/aspect-ratio)：设置宽高比。
- [object-fit](/reference/css/object-fit)：控制图片、视频如何填充盒子。
- [overflow](/reference/css/overflow)：处理内容溢出。
- [transform](/reference/css/transform)：平移、缩放、旋转和倾斜。
- [transition](/reference/css/transition)：属性变化过渡。
- [animation](/reference/css/animation)：绑定 keyframes 动画。
- [media query](/reference/css/media-query)：根据视口和设备条件应用样式。

## 选择器与函数

- [:has()](/reference/css/has)：根据子元素状态选择父级或前置元素。
- [clamp()](/reference/css/clamp)：在最小值、首选值、最大值之间生成响应式尺寸。
- [:is()](/reference/css/is)：简化选择器列表。
- [:where()](/reference/css/where)：零优先级选择器列表。
- [min()](/reference/css/min)：取较小 CSS 值。
- [max()](/reference/css/max)：取较大 CSS 值。
- [calc()](/reference/css/calc)：CSS 中进行长度计算。
- [CSS variables](/reference/css/css-variables)：自定义属性。
- [text-wrap](/reference/css/text-wrap)：文本换行策略。
- [content-visibility](/reference/css/content-visibility)：跳过屏幕外内容渲染。

## 相关内容

- [Reference 技术手册](/reference/)
- [CSS 教程](/css/)
- [HTML Reference](/reference/html/)
- [HTML 教程](/html/)
- [JavaScript / TypeScript 问题](/how-to/javascript/)