CSS常见布局方式

CSS 常见的布局方式包括以下几种：

1. 浮动布局（Float）
2. Flex 布局（Flexible Box）
3. Grid 布局（Grid）
4. 相对定位布局（Position: Relative）
5. 绝对定位布局（Position: Absolute）

以下是每种布局方式的简单示例：

1. 浮动布局（Float）

.float-container {
  overflow: auto; /* 清除浮动 */
}
.float-item {
  float: left; /* 左浮动或右浮动 */
  margin-right: 10px; /* 间隔 */
}

<div class="float-container">
  <div class="float-item">Item 1</div>
  <div class="float-item">Item 2</div>
  <div class="float-item">Item 3</div>
</div>

2. Flex 布局（Flexible Box）

.flex-container {
  display: flex; /* 开启 Flex 布局 */
  justify-content: flex-start; /* 水平对齐方式 */
  align-items: center; /* 垂直对齐方式 */
}
.flex-item {
  margin: 5px; /* 间隔 */
}

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

3. Grid 布局（Grid）

.grid-container {
  display: grid; /* 开启 Grid 布局 */
  grid-template-columns: auto auto auto; /* 3 列等宽 */
  gap: 10px; /* 行间距和列间距 */
}
.grid-item {
  /* 内容 */
}

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
</div>

4. 相对定位布局（Position: Relative）

.relative-container {
  position: relative; /* 开启相对定位 */
}
.relative-item {
  position: absolute; /* 绝对定位 */
  top: 10px; /* 距离顶部的距离 */
  left: 10px; /* 距离左侧的距离 */
}

<div class="relative-container">
  <div class="relative-item">Item 1</div>
</div>

5. 绝对定位布局（Position: Absolute）

.absolute-container {
  position: absolute; /* 开启绝对定位 */
}
.absolute-item {
  /* 内容 */
}

<div class="absolute-container">
  <div class="absolute-item">Item 1</div>
</div>

这些布局方式可以根据具体需求进行组合和调整，以实现复杂的页面布局。