CSS 速查表
一份可搜索、可打印的 CSS 参考——选择器、盒模型、flexbox、grid、排版、过渡和现代特性。免费。
选择器
13.class
选择所有带该类的元素
#id
选择带该 id 的元素
a, b
分组：选择 a 和 b
a b
后代：a 内的 b
a > b
a 的直接子元素 b
a + b
紧跟在 a 之后的相邻兄弟
a ~ b
a 之后的通用兄弟 b
[type="text"]
属性选择器
:hover :focus
表示状态的伪类
:nth-child(2n)
每个偶数位子元素
::before ::after
伪元素（生成内容）
:not(.x)
否定：除 .x 之外的任何元素
:is(h1, h2, h3)
匹配列表中的任一选择器
盒模型
7box-sizing: border-box;
宽度包含内边距和边框
margin: 0 auto;
水平居中块元素
padding: 1rem 2rem;
垂直 1rem，水平 2rem
border: 1px solid #ccc;
宽度、样式、颜色
border-radius: 8px;
圆角
outline: 2px dashed red;
轮廓（不影响布局）
overflow: hidden;
裁剪溢出的内容
Flexbox
8display: flex;
创建弹性容器
flex-direction: row | column;
主轴方向
justify-content: space-between;
沿主轴对齐
align-items: center;
沿交叉轴对齐
flex-wrap: wrap;
允许项目换行
gap: 1rem;
项目之间的间距
flex: 1;
增长以填充空间（1 1 0）
align-self: flex-end;
为单个项目覆盖交叉轴对齐
网格
8display: grid;
创建网格容器
grid-template-columns: 1fr 1fr 1fr;
三个等宽列
repeat(3, 1fr)
重复轨道的简写
minmax(200px, 1fr)
在最小值和最大值之间的轨道
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
响应式自动列
gap: 1rem;
行间距和列间距
grid-column: 1 / 3;
跨越从第 1 线到第 3 线
place-items: center;
在两个轴上都居中项目
排版
8font-family: system-ui, sans-serif;
字体栈
font-size: 1.125rem;
相对字体大小
font-weight: 600;
粗体字重
line-height: 1.6;
行间距
letter-spacing: .02em;
字间距
text-align: center;
水平文本对齐
text-transform: uppercase;
更改字母大小写
text-overflow: ellipsis;
用 … 截断（需要 overflow+nowrap）
颜色与背景
7color: #1f2937;
文本颜色
background: rgb(0 0 0 / 50%);
带 alpha 的现代 rgb
background: linear-gradient(90deg,#f06,#48f);
线性渐变
opacity: .5;
元素透明度
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
投影
background-size: cover;
缩放图片以覆盖
color-mix(in srgb, red 40%, blue);
混合两种颜色
定位
6position: relative;
相对正常位置偏移
position: absolute;
相对最近的已定位祖先
position: fixed;
相对视口
position: sticky; top: 0;
滚动越过时吸附
inset: 0;
top/right/bottom/left = 0
z-index: 10;
堆叠顺序
过渡与动画
5transition: all .2s ease;
对属性变化做动画
transform: translateY(-4px) scale(1.05);
移动、缩放、旋转
@keyframes spin { to { transform: rotate(360deg); } }
定义动画
animation: spin 1s linear infinite;
运行关键帧动画
will-change: transform;
提示浏览器进行优化
响应式与现代特性
7@media (max-width: 768px) { ... }
媒体查询断点
clamp(1rem, 2vw, 2rem)
带 min/max 的流式值
aspect-ratio: 16 / 9;
保持宽高比
var(--brand)
使用自定义属性
:root { --brand: #4f46e5; }
定义自定义属性
container-type: inline-size;
启用容器查询
@container (min-width: 400px) {…}
容器查询
没有条目匹配“:q”。
需要帮助？
使用此工具时遇到问题？请告诉我们的团队。