选择器
选择器越具体，优先级（specificity）越高，越难被覆盖。
| 写法 | 说明 |
|---|
| 通用选择器，匹配所有元素（谨慎使用） |
| 类选择器，最常用的复用方式 |
| ID 选择器，优先级高，一个页面内应唯一 |
| 分组选择器，同时匹配 a 与 b |
| 后代选择器，匹配 a 内部任意层级的 b |
| 子选择器，仅匹配 a 的直接子元素 b |
| 相邻兄弟，匹配紧跟在 a 后的 b |
| 通用兄弟，匹配 a 之后同级的所有 b |
| 属性选择器，按属性取值匹配 |
| 伪类，鼠标悬停状态 |
| 伪元素，需配合 content 使用 |
| 第 n 个子元素，支持 odd/even/2n+1 |
| 否定伪类，排除匹配 sel 的元素 |
| 分组匹配；:where 优先级为 0 |
盒模型与布局
| 写法 | 说明 |
|---|
| 宽高包含 padding 与 border，推荐全局设置 |
| 外边距 / 内边距，可用 1~4 个值简写 |
| 移除元素，不占空间 |
| 块级，独占一行 |
| 行内块，可设宽高且不换行 |
| 相对定位，保留原位，作绝对定位参照 |
| 绝对定位，相对最近的定位祖先 |
| 固定定位，相对视口 |
| 粘性定位，滚动到阈值后固定 |
| 层叠顺序，仅对定位/弹性元素生效 |
| 溢出裁剪 / 需要时出现滚动条 |
Flex 弹性布局
一维排列首选 Flex。
| 写法 | 说明 |
|---|
| 开启弹性布局 |
| 主轴方向 |
| 主轴对齐：center / space-between 等 |
| 交叉轴对齐：center / stretch 等 |
| 允许换行 |
| 子项间距，无需再算 margin |
| flex-grow:1 flex-shrink:1 flex-basis:0 |
| 单个子项覆盖容器的 align-items |
Grid 网格布局
| 写法 | 说明 |
|---|
| 开启网格布局 |
| 定义列，如 repeat(3, 1fr) |
| 用命名区域排版，直观 |
| 跨第 1 到第 3 条网格线（占 2 列） |
| 自动填充空洞 |
| 同时设置 align-items 与 justify-items |
| 列宽自适应，常用于响应式卡片 |
文字与颜色
| 写法 | 说明 |
|---|
| 字号/行高/字体族简写 |
| 无单位行高，随字号等比缩放 |
| 配合 overflow:hidden 与 nowrap 显示省略号 |
| 禁止换行 |
| 长串强制断行 |
| 文字颜色，可用 hex / rgb / hsl |
| 线性渐变背景 |
| 整体透明度（含子元素） |
| 盒子阴影 |
| 圆角，50% 为椭圆/圆形 |
单位与响应式
| 写法 | 说明 |
|---|
| 像素，绝对单位 |
| 相对父元素百分比 |
| 相对当前元素字号 |
| 相对根元素 html 字号，常用于整体缩放 |
| 视口宽/高的 1% |
| 在最小与最大值之间自适应 |
| 媒体查询，按视口宽度应用样式 |
| 过渡动画 |
| 位移/缩放/旋转，不触发重排 |
| 关键帧动画 |
使用说明
写样式时最常翻的就是属性取值：居中怎么写、阴影参数是什么、Grid 怎么分列。本速查按实际使用场景把常用 CSS 属性与取值归好组，边写边查比逐条搜文档快。
- 用顶部搜索框输入属性名或用途关键词（如 flex、居中、阴影）。
- 点击分组按钮只看某一类，如「布局」「文本与字体」。
- 点任意一行的复制按钮，直接把属性片段复制走。
常见问题
- Flex 里怎么实现水平垂直居中？
- 父元素设 display: flex; align-items: center; justify-content: center; 即可，两者分别控制交叉轴与主轴对齐。
- box-shadow 的参数顺序是什么？
- 依次为 水平偏移 垂直偏移 模糊半径 扩展半径 颜色，如 0 2px 8px 0 rgba(0,0,0,.1)。
延伸阅读