CSS布局汇总与应用场景 | 豆包MarsCode AI刷题

1. 浮动布局 (Float Layout)

概念

浮动布局是早期用于实现两列或多列布局的一种方法，通过将元素设置为 float，让元素浮动到父容器的左边或右边。

应用场景

• 传统的多列布局。
• 图文混排（如文章中的图片和文字环绕布局）。

实操示例

css复制代码
.container {
  width: 100%;
  overflow: hidden; /* 清除浮动 */
}

.left {
  float: left;
  width: 50%;
}

.right {
  float: left;
  width: 50%;
}

注意： 浮动元素会脱离文档流，父元素不再包裹浮动元素。如果需要避免这个问题，通常会使用 clearfix 来清除浮动。

css复制代码
/* 清除浮动 */
.container::after {
  content: "";
  display: table;
  clear: both;
}

实操场景

• 创建简单的两栏或多栏布局，通常适用于响应式设计。
• 图片和文字环绕的设计（如新闻稿中的图片）

---

2. 定位布局 (Position Layout)

概念

定位布局使用 position 属性来指定元素的位置。常见的值有 static（默认值），relative（相对定位），absolute（绝对定位），fixed（固定定位），sticky（粘性定位）。

应用场景

• 精确控制元素位置。
• 创建浮动效果（如弹出层、模态框等）。
• 固定导航栏。

实操示例

• 相对定位 (relative) ：相对于自身的原位置定位，常用于微调元素位置。

css复制代码
.box {
  position: relative;
  left: 20px; /* 向右偏移20px */
  top: 10px;  /* 向下偏移10px */
}

• 绝对定位 (absolute) ：相对于最近的定位祖先元素（非 static）进行定位。

css复制代码
.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中 */
}

• 固定定位 (fixed) ：元素相对于浏览器窗口进行定位，常用于固定在页面的顶部、底部或侧边。

css复制代码
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #333;
  color: white;
}

• 粘性定位 (sticky) ：元素在滚动时固定在某个位置，直到其父容器滚出视口。

css复制代码
.sticky-header {
  position: sticky;
  top: 0;
  background: #333;
  color: white;
}

实操场景

• 固定在页面顶部的导航栏。
• 使用 absolute 和 relative 实现居中对齐。
• 制作模态框、弹出层、提示框等。

---

3. 弹性盒子布局 (Flexbox Layout)

概念

弹性盒子布局通过 display: flex 和一系列灵活的属性来实现更复杂且响应式的布局。Flexbox 使得元素在容器中按照需求自动调整大小、位置和顺序，解决了传统布局中的许多问题。

应用场景

• 水平和垂直居中对齐。
• 多列布局，元素自适应容器的大小。
• 创建响应式设计。

实操示例

• 简单的水平和垂直居中

css复制代码
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 满屏高度 */
}

.box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
}

• 多列布局，自适应

css复制代码
.container {
  display: flex;
  flex-wrap: wrap; /* 启用换行 */
}

.item {
  flex: 1 1 30%; /* 每项宽度占父容器的 30%，且可伸缩 */
  margin: 10px;
  height: 200px;
  background-color: #e74c3c;
}

• 对齐和排序

css复制代码
.container {
  display: flex;
  justify-content: space-between; /* 项目之间均匀分布 */
  align-items: flex-end; /* 项目底部对齐 */
}

实操场景

• 创建响应式导航栏。
• 实现图片画廊、卡片布局等。
• 水平垂直居中内容。

---

4. 网格布局 (CSS Grid Layout)

概念

CSS 网格布局是一种二维布局系统，它通过 display: grid 属性将容器划分为行和列，从而使得复杂的布局变得简单。

应用场景

• 复杂的网格布局，如 2D 排版、响应式设计。
• 制作内容区域的设计（如博客、商品展示等）。

实操示例

• 简单网格布局

css复制代码
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建 3 列的网格 */
  gap: 10px; /* 网格间隙 */
}

.item {
  background-color: #9b59b6;
  height: 100px;
}

• 自动填充网格

css复制代码
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

• 定位项到特定位置

css复制代码
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

.item1 {
  grid-column: 1 / 3; /* 跨越前两列 */
  grid-row: 1;
}

实操场景

• 实现多行多列的网格布局，如图库、卡片布局。
• 自适应布局，根据容器大小动态调整网格项数量。

---

5. 表格布局 (Table Layout)

概念

表格布局使用 display: table、display: table-row、display: table-cell 等属性来模拟表格结构，适用于内容结构化的布局。

应用场景

• 传统表格展示数据。
• 垂直和水平居中的布局。

实操示例

css复制代码
.container {
  display: table;
  width: 100%;
}

.item {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 200px;
  background-color: #f39c12;
}

实操场景

• 数据表格展示。
• 使用 table 和 table-cell 实现居中布局。