梳理 HTML 语义化标签、常用选择器、Flexbox、Grid、响应式断点和 CSS 自定义变量，示例贴合文档站布局，适合切页面时快速复制调整。

语义化标签

用有含义的标签替代层层嵌套的通用容器，利于搜索收录与屏幕阅读器；一页只放一个主内容区，标题按层级递减不要跳级。导航链接放导航标签，侧边内容放侧栏标签，页脚信息放页脚标签。

霍州比特人博客

常用选择器

类选择器用点号，id 选择器用井号，子选择器用大于号只匹配直接子元素，属性选择器按属性值筛选。优先级大致是内联样式大于 id，再大于类与属性，最后是标签，少用强制覆盖声明。

.card > p { margin: 0; }

Flexbox

一维布局，主轴方向用内容分布属性，交叉轴用对齐属性，gap 统一管间距，换行属性控制是否换行，适合导航栏和工具栏。子项用 flex 简写设置伸缩比例，比逐个算百分比省事。

.row { display: flex; }

Grid

二维布局，fr 按比例分配剩余空间，最小最大函数配合自动填充能自动决定列数，命名区域让复杂排版一眼可读。行列间距统一交给 gap，不必给每个子项单独写外边距，改起来只动一处。

.grid { display: grid; }

响应式断点

移动优先：先写基础样式，再用最小宽度逐级增强。按内容撑不住的位置设断点，别照抄具体机型宽度；图片加最大宽度百分百防止撑破容器，深色偏好可用媒体查询单独适配。

@media (min-width: 1024px) { }

自定义变量

在根伪类集中定义变量，用 var 函数取值，改一处即可换主题色和间距，比散落各处的字面量好维护得多。变量也能在媒体查询里重新赋值，做明暗主题切换不用复制整套规则。

:root { --brand: #2f6feb; }