CSS 盒模型与布局

组合盒模型、Flex 和 Grid 实现一个课程页面,能算清尺寸、说对对齐关系,并解释内容溢出的原因与修法。

前端基础核心约 30 分钟
开始学习
学习目标
  • 解释 content/padding/border/margin 如何参与宽度计算,会用 box-sizing 统一口径
  • 用 Flex 处理一维排列(导航、卡片行),用 Grid 处理二维网格
  • 判断内容溢出的原因,并用 min-width:0、overflow-wrap 等手段修复
知识点
盒模型box-sizingFlexboxGrid溢出处理

内容版本 1.0.0,核验于 2026-10-26

Command Palette

Search for a command to run...