1. 标准流布局（Normal Flow）
- 描述：这是最基础的布局方式，元素按照文档的顺序从上到下排列，块级元素垂直排列，内联元素水平排列。
- 应用：适用于大部分简单的网页布局。
- 示例：
css"><div>块级元素1</div>
<div>块级元素2</div>
<span>内联元素</span>
2. 浮动布局（Float）
- 描述：通过
float 属性将元素浮动，使其脱离正常文档流，可以让元素横向排列。 - 应用：传统的多列布局，尽管现代布局方式有了更多的选择，浮动布局仍然在某些场景中使用。
- 示例：
css">.container {width: 100%;
}
.left {float: left;width: 50%;
}
.right {float: right;width: 50%;
}
3. 定位布局（Positioning）
- 描述：通过
position 属性（static、relative、absolute、fixed、sticky）控制元素的位置。 - 应用：需要精确控制元素位置时使用。
- 示例：
css">.relative {position: relative;left: 10px;top: 20px;
}
.absolute {position: absolute;top: 50px;left: 50px;
}
4. 弹性盒子布局（Flexbox）
- 描述：通过
display: flex 来创建一个灵活的容器，子元素可以按行或列排列，并且能够根据容器的大小自动调整布局。 - 应用：适用于一维布局（单行或单列）。
- 示例
css">.container {display: flex;justify-content: space-between; /* 水平分布 */align-items: center; /* 垂直居中 */
}
.item {flex: 1; /* 让所有子元素平分空间 */
}
5. 网格布局（Grid）
- 描述：通过
display: grid 创建一个二维网格布局，允许在行和列的方向上进行精确控制。 - 应用：适用于复杂的布局，尤其是需要同时控制行和列时。
- 示例：
css">.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 表格的布局，适用于需要表格形式的内容展示。 - 应用：可以处理复杂的表格内容布局。
- 示例：
css">.container {display: table;width: 100%;
}
.item {display: table-cell;padding: 10px;
}
7. 多列布局（Multi-column Layout）
- 描述：使用
column-count 和 column-gap 来实现多列布局。 - 应用：适用于文本内容的多列排版，如新闻网站的文章布局。
- 示例：
css">.container {column-count: 3; /* 创建三列 */column-gap: 20px; /* 列间距 */
}
8. 响应式布局
- 描述：通过
@media 查询根据不同的设备屏幕大小调整布局。 - 应用：适用于设计自适应不同屏幕尺寸的网页。
- 示例：
css">@media (max-width: 600px) {.container {flex-direction: column; /* 屏幕小于600px时列方向布局 */}
}
9. CSS 变量布局
- 描述：使用 CSS 变量 (
--var-name) 动态控制布局的各个部分，便于主题化和自适应设计。 - 应用：增强代码可读性和重用性。
- 示例：
css">:root {--main-color: #3498db;
}
.container {background-color: var(--main-color);
}
