logo
12

CSS 布局与视觉表达

⏱️ 20分钟

CSS Layout and Visuals: Turning Structure Into Interface

Module Goal

Upgrade from "readable" structure to a "usable and layered" page.

Layout Priority

  1. Box model and spacing
  2. Flex/Grid for main layout
  3. Local visuals (borders, shadows, gradients, motion)

Get It Right First, Then Make It Pretty

  • First ensure layout stability: no squishing, no misalignment, no overflow
  • Then handle visual polish: color hierarchy, interaction feedback, animation rhythm

Common Debugging Order

When a page "looks wrong," check in this order:

  1. display / position
  2. width / height / box-sizing
  3. margin / padding / gap
  4. overflow / z-index

Lab Exercise Tips for This Module

  • Complete at least 2 exercises each for Flex and Grid
  • After each visual Lab, write one sentence: "the key property behind this effect"
  • Don't just copy answers -- explain why it's written this way

Transfer Task

Build a card list component in two versions:

  • Flex version
  • Grid version

Compare the difference between the two in terms of maintainability and extensibility.