12

CSS 布局与视觉表达

⏱️ 20分钟

CSS 布局与视觉：把结构变成界面

模块目标

把“能看懂”的结构，升级为“可用且有层次”的页面。

布局优先级

盒模型与间距
Flex/Grid 主布局
局部视觉（边框、阴影、渐变、动效）

先做对，再做好看

先保证布局稳定：不挤压、不错位、不溢出
再做视觉表现：颜色层次、交互反馈、动效节奏

常见排查顺序

当页面“看起来不对”时，按顺序排查：

display / position
width / height / box-sizing
margin / padding / gap
overflow / z-index

本模块 Lab 练习建议

Flex 与 Grid 至少各完成 2 个练习
每个视觉类 Lab 结束后，写一句“这个效果的核心属性”
避免只抄答案，必须解释为什么这么写

迁移任务

把一个卡片列表组件做两版：

Flex 版本
Grid 版本

对比两者在“可维护性和扩展性”上的差异。