CSS布局指南 🧱

常见布局模式

1. Flexbox 布局

   • 适用于一维布局（行或列）
   • 核心属性：display: flex、flex-direction、justify-content、align-items
   • 📌 示例：

     .container {
       display: flex;
       flex-wrap: wrap;
     }
     

   • 

2. Grid 布局

   • 适用于二维布局（行和列）
   • 核心属性：display: grid、grid-template-columns、grid-gap
   • 📌 示例：

     .grid-container {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
     }
     

   • 

3. 定位布局

   • position: absolute / position: relative
   • 适用于复杂定位需求
   • ⚠️ 注意：需配合 top、left 等属性使用

学习资源

• CSS基础语法入门 📘
• HTML结构与语义化 📁
• 响应式布局实践 📱

实践建议

• 使用浏览器开发者工具实时调试布局
• 多参考官方文档和社区案例
• ✅ 推荐工具：CodePen / JSFiddle