1. 标准流布局（Normal Flow）

• 描述：这是最基础的布局方式，元素按照文档的顺序从上到下排列，块级元素垂直排列，内联元素水平排列。
• 应用：适用于大部分简单的网页布局。
• 示例：

<div>块级元素1</div>
<div>块级元素2</div>
<span>内联元素</span>

2. 浮动布局（Float）

• 描述：通过 float 属性将元素浮动，使其脱离正常文档流，可以让元素横向排列。
• 应用：传统的多列布局，尽管现代布局方式有了更多的选择，浮动布局仍然在某些场景中使用。
• 示例：

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

3. 定位布局（Positioning）

• 描述：通过 position 属性（static、relative、absolute、fixed、sticky）控制元素的位置。
• 应用：需要精确控制元素位置时使用。
• 示例：

.relative {
  position: relative;
  left: 10px;
  top: 20px;
}
.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
}

4. 弹性盒子布局（Flexbox）

• 描述：通过 display: flex 来创建一个灵活的容器，子元素可以按行或列排列，并且能够根据容器的大小自动调整布局。
• 应用：适用于一维布局（单行或单列）。
• 示例

.container {
  display: flex;
  justify-content: space-between; /* 水平分布 */
  align-items: center;            /* 垂直居中 */
}
.item {
  flex: 1; /* 让所有子元素平分空间 */
}

5. 网格布局（Grid）

• 描述：通过 display: grid 创建一个二维网格布局，允许在行和列的方向上进行精确控制。
• 应用：适用于复杂的布局，尤其是需要同时控制行和列时。
• 示例：

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建3列 */
  grid-template-rows: auto;              /* 自动高度 */
  gap: 10px;                             /* 列/行间隙 */
}
.item {
  grid-column: span 2; /* 占据两列 */
}

6. 表格布局（Table Layout）

• 描述：使用 display: table 和 display: table-cell 来模仿 HTML 表格的布局，适用于需要表格形式的内容展示。
• 应用：可以处理复杂的表格内容布局。
• 示例：

.container {
  display: table;
  width: 100%;
}
.item {
  display: table-cell;
  padding: 10px;
}

7. 多列布局（Multi-column Layout）

• 描述：使用 column-count 和 column-gap 来实现多列布局。
• 应用：适用于文本内容的多列排版，如新闻网站的文章布局。
• 示例：

.container {
  column-count: 3; /* 创建三列 */
  column-gap: 20px; /* 列间距 */
}

8. 响应式布局

• 描述：通过 @media 查询根据不同的设备屏幕大小调整布局。
• 应用：适用于设计自适应不同屏幕尺寸的网页。
• 示例：

@media (max-width: 600px) {
  .container {
    flex-direction: column; /* 屏幕小于600px时列方向布局 */
  }
}

9. CSS 变量布局

• 描述：使用 CSS 变量 (--var-name) 动态控制布局的各个部分，便于主题化和自适应设计。
• 应用：增强代码可读性和重用性。
• 示例：

:root {
  --main-color: #3498db;
}
.container {
  background-color: var(--main-color);
}