# HTML/CSS 速查
## 语义化标签
用有含义的标签替代层层嵌套的通用容器，利于搜索收录与屏幕阅读器；一页只放一个主内容区，标题按层级递减不要跳级。导航链接放导航标签，侧边内容放侧栏标签，页脚信息放页脚标签。
```html
```
## 常用选择器
类选择器用点号，id 选择器用井号，子选择器用大于号只匹配直接子元素，属性选择器按属性值筛选。优先级大致是内联样式大于 id，再大于类与属性，最后是标签，少用强制覆盖声明。
```css
.card > p { margin: 0; }
```
## Flexbox
一维布局，主轴方向用内容分布属性，交叉轴用对齐属性，gap 统一管间距，换行属性控制是否换行，适合导航栏和工具栏。子项用 flex 简写设置伸缩比例，比逐个算百分比省事。
```css
.row { display: flex; }
```
## Grid
二维布局，fr 按比例分配剩余空间，最小最大函数配合自动填充能自动决定列数，命名区域让复杂排版一眼可读。行列间距统一交给 gap，不必给每个子项单独写外边距，改起来只动一处。
```css
.grid { display: grid; }
```
## 响应式断点
移动优先：先写基础样式，再用最小宽度逐级增强。按内容撑不住的位置设断点，别照抄具体机型宽度；图片加最大宽度百分百防止撑破容器，深色偏好可用媒体查询单独适配。
```css
@media (min-width: 1024px) { }
```
## 自定义变量
在根伪类集中定义变量，用 var 函数取值，改一处即可换主题色和间距，比散落各处的字面量好维护得多。变量也能在媒体查询里重新赋值，做明暗主题切换不用复制整套规则。
```css
:root { --brand: #2f6feb; }
```