选择器

基础选择器

*	通用——所有元素
div	类型——所有元素
.class	类——具有该类名的元素
#id	ID——具有该 id 的元素
[attr]	属性——具有该属性的元素
[attr="val"]	属性等于指定值

组合选择器

A B	后代（任意深度）
A > B	直接子元素
A + B	紧邻兄弟（下一个）
A ~ B	通用兄弟（之后所有）

伪类

:hover	鼠标悬停
:focus	元素获得焦点
:first-child	父元素的第一个子元素
:nth-child(n)	第 n 个子元素（1 起，`odd`、`even`、`2n+1`）
:not(sel)	否定——排除匹配项
:has(sel)	父元素选择器（包含匹配）

伪元素

::before	在元素前插入内容
::after	在元素后插入内容
::placeholder	设置输入框占位文字样式
::selection	设置高亮文字样式

盒模型

盒尺寸

/* Include padding/border in width */
*, *::before, *::after {
  box-sizing: border-box;
}

属性

margin	边框外侧空间
border	围绕 padding 的边框
padding	边框内侧空间
width / height	内容尺寸
outline	margin 外侧轮廓（不占空间）

简写

margin: 10px;           /* all sides */
margin: 10px 20px;      /* vertical | horizontal */
margin: 10px 20px 30px; /* top | horiz | bottom */
margin: 10px 20px 30px 40px; /* T R B L */

Flexbox

容器

.flex {
  display: flex;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
  gap: 1rem;
}

容器属性

flex-direction	`row` \| `column` \| `row-reverse` \| `column-reverse`
flex-wrap	`nowrap` \| `wrap` \| `wrap-reverse`
justify-content	`flex-start` \| `center` \| `space-between` \| `space-around` \| `space-evenly`
align-items	`stretch` \| `center` \| `flex-start` \| `flex-end` \| `baseline`
align-content	多行交叉轴对齐
gap	flex 子项间距

子项属性

flex: 1	拉伸填充剩余空间
flex: 0 0 200px	固定宽度，不拉伸不收缩
align-self	覆盖单个子项的 align-items
order	改变视觉顺序（默认 0）

Grid

容器

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

容器属性

grid-template-columns	定义列轨道：`1fr 2fr`、`repeat(3, 1fr)`
grid-template-rows	定义行轨道
grid-template-areas	命名区域：`"header header" "nav main"`
gap	行列间距
justify-items	子项行内对齐（水平）
align-items	子项块级对齐（垂直）

子项定位

.item {
  grid-column: 1 / 3;   /* span cols 1-2 */
  grid-row: 1 / -1;     /* span all rows */
  grid-area: header;    /* named area */
}

字体排版

字体属性

font-family	字体栈：`'Inter', sans-serif`
font-size	大小：`1rem`、`16px`、`clamp(1rem, 2vw, 2rem)`
font-weight	`normal`（400）\| `bold`（700）\| `100`-`900`
font-style	`normal` \| `italic` \| `oblique`
line-height	行距：`1.5`（推荐无单位）
letter-spacing	字间距：`0.05em`

文本属性

text-align	`left` \| `center` \| `right` \| `justify`
text-decoration	`none` \| `underline` \| `line-through`
text-transform	`uppercase` \| `lowercase` \| `capitalize`
text-overflow	`ellipsis`（需配合 overflow: hidden）
white-space	`nowrap` \| `pre` \| `pre-wrap`
word-break	`break-all` \| `break-word`

颜色与背景

颜色格式

color: #ff6600;             /* hex */
color: rgb(255, 102, 0);    /* rgb */
color: hsl(24, 100%, 50%);  /* hsl */
color: oklch(70% 0.15 50);  /* oklch */

背景属性

background-color	纯色填充：`#f0f0f0`
background-image	`url(img.jpg)` 或渐变
background-size	`cover` \| `contain` \| `100px 200px`
background-position	`center` \| `top right` \| `50% 50%`
background-repeat	`no-repeat` \| `repeat-x` \| `repeat-y`

渐变

background: linear-gradient(to right, #f00, #00f);
background: radial-gradient(circle, #fff, #000);
background: conic-gradient(red, yellow, green);

过渡与动画

过渡

.btn {
  transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
  background: #0056b3;
  transform: scale(1.05);
}

过渡属性

transition-property	要动画的属性
transition-duration	时长：`0.3s`、`300ms`
transition-timing-function	`ease` \| `linear` \| `ease-in-out` \| `cubic-bezier()`
transition-delay	开始前等待时间

关键帧动画

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon { animation: spin 1s linear infinite; }

动画属性

animation-name	引用 @keyframes 名称
animation-duration	一个周期时长
animation-iteration-count	`1` \| `3` \| `infinite`
animation-direction	`normal` \| `alternate` \| `reverse`
animation-fill-mode	`forwards` \| `backwards` \| `both`

响应式设计

媒体查询

@media (max-width: 768px) {
  .sidebar { display: none; }
}
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #eee; }
}

常用断点

max-width: 480px	手机
max-width: 768px	平板
max-width: 1024px	小笔记本
max-width: 1280px	桌面

视口单位

vw / vh	视口宽 / 高的百分比
dvh	动态视口高度（移动端安全）
svh / lvh	小 / 大视口高度
cqi	容器查询内联尺寸

容器查询

.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

定位

position 取值

static	默认——正常文档流
relative	相对正常位置偏移，保留空间
absolute	相对最近定位祖先定位
fixed	相对视口定位，滚动时固定
sticky	根据滚动在 relative/fixed 间切换

居中模式

/* Flex center */
display: flex;
justify-content: center;
align-items: center;

/* Grid center */
display: grid;
place-items: center;

层叠

z-index	层叠顺序（值越大越靠前），需配合 `position`
isolation: isolate	创建新层叠上下文

CSS 自定义属性

定义与使用

:root {
  --color-primary: #3b82f6;
  --spacing-md: 1rem;
}
.btn {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

回退值

color: var(--accent, #ff6600);
/* uses #ff6600 if --accent is not defined */

动态主题

[data-theme="dark"] {
  --bg: #1a1a2e;
  --text: #e0e0e0;
}
body { background: var(--bg); color: var(--text); }

CSS 快速参考