HTML 与 CSS 复习：盒模型、Flex 与 Grid 布局

前端三件套里 CSS 是我最容易"一看就会、一写就废"的部分。这次把盒模型和两大布局系统认真过了一遍，配合练习整理成笔记。

一、盒模型：一切的起点

每个元素都是一个盒子：content → padding → border → margin。关键在于宽度的计算方式有两种：

• content-box（默认）：width 只算内容，加上 padding 和 border 后实际更宽；
• border-box：width 包含 padding 和 border，设多少就是多少。

*, *::before, *::after {
  box-sizing: border-box;   /* 几乎所有现代项目的第一行 CSS */
}

不理解盒模型，就会遇到"明明设了 50% 宽度，两个盒子却换行了"这类灵异问题——凶手往往是 padding。

二、Flex：一维布局之王

Flex 适合"一排或一列"的场景：导航栏、居中、等分卡片。

.navbar {
  display: flex;
  justify-content: space-between;  /* 主轴: 两端对齐 */
  align-items: center;             /* 交叉轴: 垂直居中 */
  gap: 16px;                       /* 项目间距, 比 margin 干净 */
}

最常用的三个属性记住就能解决 80% 的问题：justify-content（主轴对齐）、align-items（交叉轴对齐）、flex: 1（剩余空间分配）。

经典的垂直居中，Flex 时代只要三行：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

三、Grid：二维布局利器

Grid 同时控制行和列，适合整体页面骨架、卡片墙：

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

上面这段是本站首页卡片区的真实代码：auto-fit + minmax 实现了"容器够宽就多列、窄了自动减列"的响应式效果，一行媒体查询都不用写。

四、Flex 还是 Grid？

• 内容驱动、一维排列 → Flex；
• 结构驱动、二维网格 → Grid；
• 实际项目里两者经常嵌套混用：Grid 定页面骨架，Flex 排组件内部。

五、小结

CSS 的难点不在属性多，而在"布局心智模型"。把盒模型吃透、Flex/Grid 各写十个练习，大部分页面就都能拆解出来了。本站整个页面没有引入任何框架，纯手写 CSS，就当是这次复习的结业作业。