📌 1. Flexbox 布局

Flexbox 是现代网页布局的基石，适合创建灵活的响应式设计。核心属性包括：

  • display: flex 启用弹性布局
  • flex-direction 控制主轴方向（row/column）
  • justify-content 对齐方式（flex-start/center/space-between）
  • align-items 垂直对齐（stretch/baseline）
Flexbox_布局示意图

📚 深入学习 Flexbox 布局实战 与 Grid 布局对比

📌 2. Grid �布局

CSS Grid 提供二维布局能力，适合复杂页面结构：

  • grid-template-columns 定义列布局（repeat() 函数）
  • grid-gap 控制间距（已弃用，建议使用 gap）
  • grid-auto-flow 自动填充策略（row/column）
Grid_布局结构图

🧩 示例代码：CSS Grid 实战项目 演示

📌 3. 定位与层叠

  • position: absolute 创建绝对定位
  • z-index 控制元素层叠顺序
  • transform 实现平移/旋转（translateX()/rotate()）
CSS_Grid_示例图

⚠️ 注意：定位属性详解 中包含常见陷阱

📌 4. 响应式布局

  • @media 查询适配不同设备
  • flex-wrap 控制换行（wrap/nowrap）
  • grid-template-areas 定义区域名称

🔄 实战案例：响应式布局实践 演示

✅ 总结

掌握这些技术后，建议：

  1. 练习 Flexbox 布局进阶
  2. 尝试 Grid 布局项目
  3. 研究 CSS 3D 布局 拓展

📈 图片关键词生成示例：Flexbox_布局示意图 | Grid_布局结构图 | CSS_Grid_示例图