专题 C4：CSS 与设计
开发者必须掌握的 CSS 布局模式
布局模式不是炫技，而是帮助团队减少重复决策、让响应式行为更可预测的基础设施。
先按任务选择布局模式
表单和设置页更适合垂直 stack；对比、预览和编辑更适合 split；高密度工具页更适合 sidebar + content。
如果每个页面都从零开始决定结构，团队会在响应式断点、间距和操作区位置上持续返工。
让布局在不同断点都可用
- 双栏布局在窄屏下要有明确的纵向堆叠顺序和面板标签。
- 关键操作条尽量固定在输入/结果附近，不要藏进密集侧边栏。
- 把间距、最大宽度和 sticky 行为做成可复用规则，而不是页面私有实现。
实用输入/输出示例
输入
页面：数据比对 需求：左侧输入，右侧结果 断点：1024px 以下改为上下堆叠
输出
桌面端：双栏 split layout 移动端：纵向 stack，并保留面板标题与置顶操作条