CSS 盒模型：卡片组件
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个实验中，你将深入学习 CSS 盒模型，这是理解 CSS 布局的基础。
每个 HTML 元素都可以看作一个盒子，由内到外包含：内容(content)、内边距(padding)、边框(border)、外边距(margin)。
你将学到：
- 如何使用
padding控制内容与边框的距离 - 如何使用
border添加边框样式 - 如何使用
margin控制元素之间的距离 - 理解
box-sizing的作用
Beginner⏱ 15-20 min
Learning Objectives
- 理解盒模型的四个组成部分
- 掌握 padding 和 margin 的区别
- 学会设置边框样式
- 理解 box-sizing: border-box 的作用
Scenario
你正在为一个博客网站设计文章卡片组件。
设计要求：
- 卡片需要有适当的内边距，让内容不贴边
- 卡片需要有清晰的边框
- 多个卡片之间需要有间距
- 卡片整体宽度固定，内容自适应
Why Do This
- CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
- Clarify the box model and layout rules first, then add visual polish — less rework that way.
- Writing styles as reusable patterns is more valuable than tweaking a single page.
Hands-on Practice
- Write the layout skeleton first (display/gap/align), then add colors and shadows.
- Extract repeated styles into reusable classes.
- Use validation rules to reverse-engineer the design intent of your current styles.
Common Mistakes
- Adding margin after margin to fix positioning while ignoring layout containers.
- Selectors nested too deep, causing style coupling.
- Only caring about how it looks without considering maintainability.
Deliverable
A reusable component style template (layout rules + visual rules + naming conventions).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was your main layout decision? Why did you choose it?
What change did you make specifically for maintainability?
What would you prioritize improving next time?
Tags
CSSBox ModelLayoutCard