你都了解哪些 CSS 布局技术？它们各自的特点和适用场景是什么？

参考答案：

在前端开发中，CSS 布局技术是核心能力，不同技术各有特点和适用场景。主要可以分为 传统布局、弹性布局 和 现代布局 三大类。

---

1. 传统布局

（1）块级布局（Block Layout）

• 基于文档流，块级元素默认垂直排列。

• 特点：

  • 容器高度由内容撑开。
  • 水平排列需要浮动或 inline-block 配合。

• 适用场景：

  • 文本内容、文章流式布局。
  • 简单的结构页面，兼容老浏览器。

（2）浮动布局（Float Layout）

.left { float: left; width: 200px; }
.right { float: right; width: 200px; }

• 特点：

  • 元素脱离普通文档流，占据左右空间。
  • 需要清除浮动 (clearfix) 以避免容器高度塌陷。

• 适用场景：

  • 早期多栏布局。
  • 图文环绕、简单侧边栏布局。

（3）定位布局（Position Layout）

• position: static | relative | absolute | fixed | sticky

• 特点：

  • 脱离文档流或相对位置偏移。
  • 可以实现重叠、固定位置或粘性滚动效果。

• 适用场景：

  • 弹窗、工具提示、固定导航栏。

---

2. 弹性布局（Flexbox）

.container {
  display: flex;
  justify-content: center; /* 主轴对齐 */
  align-items: center;     /* 侧轴对齐 */
}

• 特点：

  • 一维布局（主轴/交叉轴），可控制排列方向和对齐方式。
  • 子元素大小可以自适应、分配剩余空间。
  • 可以轻松实现居中、间距分布、响应式伸缩。

• 适用场景：

  • 水平或垂直居中。
  • 导航菜单、按钮组、列表项等一维布局场景。

---

3. 现代布局（CSS Grid）

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 100px auto;
  gap: 10px;
}

• 特点：

  • 二维布局（行 + 列）能力强。
  • 可以显式定义行列大小、间距和区域命名。
  • 支持复杂的响应式布局。

• 适用场景：

  • 页面整体布局（头部、侧边栏、内容区、底部）。
  • 表格型布局、网格画廊、仪表盘等。

---

4. 其他布局方式

• 多列布局（Multi-column Layout）

  • column-count / column-width
  • 将内容自动分成多列，类似报纸排版。

• 表格布局（Table Layout）

  • display: table | table-row | table-cell
  • 适合数据表格或等高布局场景。

• CSS Shapes / Float + Shape

  • 用于文字环绕图片或不规则形状布局。

---

5. 对比总结

布局方式	轴向	灵活性	易用性	适用场景
块级布局	垂直	低	高	文章流式布局
浮动布局	水平	中	中	早期多栏、图文环绕
定位布局	任意	高	中	弹窗、固定元素
Flexbox	一维	高	高	导航、按钮组、列表、居中
Grid	二维	高	中	仪表盘、复杂页面网格、响应式整体布局
多列布局	水平	中	高	报纸、杂志排版
表格布局	二维	中	中	数据表格、等高布局

题目要点：

• Flexbox → 一维布局，居中和伸缩简单。
• Grid → 二维布局，复杂页面结构更直观。
• 传统布局 → 兼容性好，但灵活性和可维护性差。
• 实际项目中常结合多种布局方式，例如 Grid + Flex 组合实现响应式页面。