CSS 速查表
最后更新
选择器
如何选中你想设置样式的元素。
| 选择器 | 匹配 |
|---|---|
* | 所有元素 |
p | 所有 <p> 元素（按标签） |
.btn | 带有 class="btn" 的元素 |
#main | 带有 id="main" 的元素 |
div p | <div> 内的所有 <p>（后代） |
div > p | 只匹配直接子元素 |
a:hover | 鼠标悬停中的链接（伪类） |
li:first-child | 父元素中的第一个 <li> |
li:nth-child(2n) | 每个偶数位置的 <li> |
input[type="text"] | 带有该属性的输入框 |
p::before | 在 <p> 前生成的内容（伪元素） |
盒模型
每个元素都是一个盒子：内容、内边距、边框、外边距。
| 属性 | 作用 |
|---|---|
width / height | 内容区的尺寸 |
padding | 边框内侧的空白 |
border | 1px solid #333：宽度、样式、颜色 |
margin | 边框外侧的空白 |
box-sizing: border-box | 让宽度包含内边距和边框 |
margin: 0 auto | 让块级元素水平居中 |
overflow: hidden | 裁掉溢出的内容 |
文字排版与颜色
| 属性 | 示例 |
|---|---|
color | color: #333：文字颜色 |
background | background: #fff，也可以是图片或渐变 |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px（或 rem、em） |
font-weight | 400（正常）… 700（粗体） |
line-height | 1.5：行与行之间的间距 |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
一维布局：按行或按列排列。在父元素上设置 display: flex。
| 属性（设在容器上） | 作用 |
|---|---|
display: flex | 让子元素成为 flex 项目 |
flex-direction | row（默认）或 column |
justify-content | 沿主轴对齐（center、space-between） |
align-items | 沿交叉轴对齐（center、stretch） |
gap | 项目之间的间距，例如 gap: 16px |
flex-wrap | 设为 wrap 时项目可以换行 |
flex: 1（设在子元素上） | 项目伸展，填满剩余空间 |
Grid
二维布局。在父元素上设置 display: grid。
| 属性 | 作用 |
|---|---|
display: grid | 让子元素成为 grid 项目 |
grid-template-columns | 1fr 1fr 1fr 或 repeat(3, 1fr) |
grid-template-rows | 定义各行的尺寸 |
gap | 行与列之间的间距 |
grid-column | 1 / 3：让项目横跨多列 |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) 实现响应式网格 |
place-items: center | 让每个项目在单元格中居中 |
定位与显示
| 属性 / 值 | 作用 |
|---|---|
position: static | 默认值，处于正常文档流中 |
position: relative | 相对自身原本的位置偏移 |
position: absolute | 相对最近的已定位祖先元素定位 |
position: fixed | 固定在视口中 |
position: sticky | 滚动到设定的位置时固定 |
top / right / bottom / left | 已定位元素的偏移量 |
z-index | 层叠顺序（数值越大越靠上） |
display: none | 把元素从布局中移除 |
display: inline-block | 像行内元素一样排列，但可以设置宽高 |
过渡与变换
| 属性 | 示例 |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0)：移动 |
transform: scale | scale(1.1)：缩放 |
transform: rotate | rotate(45deg) |
opacity | 0（不可见）… 1（不透明） |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px：圆角 |
单位与响应式设计
| 单位 / 功能 | 含义 |
|---|---|
px | 绝对像素 |
% | 相对于父元素 |
rem | 相对于根元素的字号 |
em | 相对于当前元素的字号 |
vw / vh | 视口宽度 / 高度的 1% |
fr | 剩余空间的份数（grid） |
@media (max-width: 600px) { … } | 在断点以下应用这些规则 |
选择器、盒模型、flexbox、grid，还有那些总是记不住的属性，全都在这一页。这份 CSS 速查表是给网页设置样式和布局时的快速参考，从选中元素到把元素居中都有。
这里的内容都是标准 CSS，在现代浏览器中都能使用。复制一条规则，或者在 HTML 在线编辑器里直接试试，编辑 CSS 时能即时预览效果。搭配 HTML 速查表查标记写法，或者在 Coddy 的免费交互式 CSS 课程里从零学习布局。
CSS 速查表常见问题
这份 CSS 速查表免费吗？
免费，而且无需注册。把它加入书签，需要查选择器、属性或布局写法时随时打开。
该用 flexbox 还是 grid？
一维布局用 flexbox，比如一排按钮、导航栏，或者排成一行或一列的项目。需要同时控制行和列的二维布局用 grid，比如整页布局或卡片墙。两者可以很好地配合使用：外层用 grid 排列卡片，每张卡片内部再用 flexbox，这种做法很常见。
如何用 CSS 让 div 居中？
最简单的现代写法是在父元素上用 flexbox：
display: flex; justify-content: center; align-items: center; 能让子元素水平和垂直都居中。如果只需要让一个设置了宽度的块级元素水平居中，margin: 0 auto 依然好用。可以在线练习 CSS 吗？
可以。打开 HTML 在线编辑器，就能一边写 HTML 和 CSS，一边实时预览。想系统地学，Coddy 免费的交互式 CSS 课程会一步步讲解选择器、盒模型、flexbox 和 grid。
这份速查表适合初学者吗？
适合。内容从选择器和盒模型这些基础讲起，再到 flexbox、grid 和过渡，你可以先用前面的部分，再逐步掌握现代布局。
相关资源
更多速查表
