案例驱动 · 中英双语 · 可交互

把「页面怎么排」
讲清楚

这是一份围绕「如何做好页面布局」的教程：讲原理、讲取舍、讲为什么这样更好，而不是罗列 CSS 属性。每个知识点都由「讲解 / 关键代码 / 动态演示」三块组成，并且用同一个案例 —— 从零设计一个博客首页 —— 从头贯穿到尾。

从第 1 章开始 → 直接看案例成品

章 · 一条案例主线

个知识点

个可交互演示

种语言全站同步

上面这张示意图就是本站的真实骨架：顶栏吸顶、目录栏粘住、正文单列、卡片自适应。整站没有一行布局是用框架生成的。

一条贯穿全站的案例

「远山手记」是一份个人技术博客。它的首页在改造前「能用但不好读」—— 我们用它作为案例，每章解决一个阶段的问题，所有演示也都围绕这份首页展开。

五个阶段，环环相扣：第 1 章用对齐 / 留白 / 层级 / 栅格整理内容；第 2 章选定骨架（单栏 / 两栏 / 三栏）；第 3 章用 Grid 搭骨架、Flex 做零件；第 4 章改造为移动优先的四档结构；第 5 章交付完整代码，并做前后对比与验收。

需求
骨架
实现
响应式
精修

五章内容

每章都包含可调参数、可切换方案、可动手实验的演示区 —— 拖动滑块，立刻看到版面的变化。

CHAPTER 01 设计原则对齐、留白、视觉层次、栅格系统：把「好看」拆成可执行、可检查的规则。对齐方式开关留白与接近性层级比例尺 12 栅格进入本章 → CHAPTER 02 经典布局模式单栏、两栏、三栏、圣杯布局，以及 F 形与 Z 形浏览模式 —— 每种模式适合解决什么问题。行宽测量五种模式一键切换 Grid vs Flex 实现眼动路径进入本章 → CHAPTER 03 Flexbox 与 Grid 两个模块的分工、原理与选型思路。一维用 Flex，二维用 Grid —— 并给出可以画出版式的命名区域。 Flex 试验台 Grid 试验台 areas 画笔选型决策器进入本章 → CHAPTER 04 响应式布局断点该加在哪里、移动优先为什么更稳、clamp() 如何抹平台阶、容器查询解决了什么问题。视口模拟器流体排版容器查询对比四类陷阱进入本章 → CHAPTER 05 案例实战从零设计一个博客首页：需求分析、骨架选型、完整代码、改造前后对比与验收清单。线框增删方案对比完整成品预览前后对比进入本章 → CHECKLIST 验收清单八条可以直接拿去用的检查项：行宽、对齐线、层级、间距刻度、键盘顺序、缩放、动效偏好。查看清单 →

本站自己就是这么写的

要求之一是「网站本身必须是所教布局方法的良好示范」。下面把用到的技术逐条列出来 —— 你可以在仓库里逐条核对，全部是原生 HTML / CSS / JavaScript，没有构建步骤。

全部实现都在 assets/css 与 assets/js 下，可以直接对照阅读。
技术	用在哪里
`CSS 自定义属性`	tokens.css 统一管理颜色 / 间距 / 字号 / 圆角；暗色主题只覆盖令牌，组件样式一行不改。
`Grid`	整站骨架（目录栏 + 正文栏）、卡片阵列、演示区、案例骨架与断点重排 —— 都是 `auto-fit` 或 `template-areas`。
`Flexbox`	顶栏、控件行、开关组、卡片内部、页脚 —— 凡是「一排东西」都用 Flex，并用 `auto` margin 处理靠边。
`clamp()`	字号刻度 `--step--1 … --step-5` 全部是流体值，因此 320px 与 1600px 之间没有字号断层。
`容器查询`	第 4.3 节的对照演示：同一个卡片组件在宽容器里变成「图左文右」，窄容器里堆叠，而媒体查询版纹丝不动。
`逻辑属性`	`margin-inline` / `padding-inline` / `border-inline` 全站使用，因此版面天然支持从右到左的语言。
`position: sticky`	顶栏常驻、章节目录粘住、案例侧栏卡片吸顶 —— 注意都配了 `align-self: start`，否则在 Grid 里会失效。
`aspect-ratio`	所有缩略图与模拟视口用比例而非固定宽高，避免加载与缩放时的布局跳动。
无障碍	语义化标签 + 跳转正文链接 + `:focus-visible` 焦点环 + `aria-live` 播报演示读数 + 尊重「减少动态效果」的系统设置。
可交互	18 个演示共用一个约 200 行的控件工具箱（滑块 / 分段按钮 / 开关统一派发事件），因此每个演示只需关心「数据变了以后怎么改样式」。
双语	中文写在 HTML 里、英文放配置对象；`data-i18n` 标记驱动全站同步切换，缺译文时优雅退回原文。

怎么用这份教程

01 按顺序读五章是递进关系：原则 → 模式 → 技术 → 响应式 → 案例。案例会不断引用前面章节的结论。

02 在演示里动手每个演示下方都有一份「实时输出」代码块，它会跟着你的操作同步重写 —— 把参数调到满意，直接复制那段 CSS。