CSS 主要学习盒模型、层叠规则、Flex、Grid 和响应式设计。

盒模型

一个元素由 content、padding、border 和 margin 组成。项目中通常统一设置：

CSS
* {
  box-sizing: border-box;
}

Grid 自适应布局

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

auto-fit 会根据可用宽度调整列数，minmax 限制每列的最小和最大宽度。

响应式原则

  • 优先使用相对尺寸，避免大量固定宽度。
  • 图片设置 max-width: 100%。
  • 先完成小屏幕布局，再逐步增强桌面布局。
  • 断点应该根据内容需要设置，而不是只按设备型号设置。