CSS Reference

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

布局与定位

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

选择器与函数

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

相关内容