1、CSS主流布局Flexbox 布局、Grid 布局、浮动布局 (Float Layout)、定位布局 (Positi

1. 普通流布局 (Normal Flow Layout)

这是浏览器默认的布局方式，包括水平流（块级元素一个接一个地垂直排列）和内联流（行内元素一个接一个地水平排列）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Normal Flow Layout</title>
    <style>
        .block {
            background-color: lightblue;
            margin: 10px 0;
            padding: 20px;
        }
        .inline {
            background-color: lightcoral;
            padding: 5px 10px;
        }
    </style>
</head>
<body>
    <div class="block">Block element 1</div>
    <div class="block">Block element 2</div>
    <span class="inline">Inline element 1</span>
    <span class="inline">Inline element 2</span>
</body>
</html>

2. 浮动布局 (Float Layout)

浮动布局是利用 float 属性，这样元素会浮动到左边或右边，其他内容则围绕它们显示。常用于创建多列布局，但需要处理清除浮动的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float Layout</title>
    <style>
        .container {
            width: 100%;
        }
        .column {
            float: left;
            width: 30%; /* 三列布局 */
            margin-right: 3.33%;
            background-color: lightblue;
            padding: 20px;
        }
        .column:last-child {
            margin-right: 0; /* 去掉最后一列的右侧间距 */
        }
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container clearfix">
        <div class="column">Column 1</div>
        <div class="column">Column 2</div>
        <div class="column">Column 3</div>
    </div>
</body>
</html>

3. 定位布局 (Positioned Layout)

利用 position 属性，可以将元素进行固定位置布局。position 属性的取值包括 static（默认值）、relative、absolute、fixed 和 sticky。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Positioned Layout</title>
    <style>
        .relative {
            position: relative;
            background-color: lightblue;
            padding: 20px;
            top: 10px; /* 相对于其初始位置向下移动10像素 */
            left: 10px; /* 相对于其初始位置向右移动10像素 */
        }
        .absolute-wrapper {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: lightgray;
        }
        .absolute {
            position: absolute;
            top: 30px; /* 相对于最近的定位祖先元素 */
            left: 30px;
            background-color: lightcoral;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="relative">Relative positioned element</div>
    <div class="absolute-wrapper">
        <div class="absolute">Absolute positioned element</div>
    </div>
</body>
</html>

4. 表格布局 (Table Layout)

使用 display: table、display: table-row 和 display: table-cell 等属性，可以实现类似 HTML 表格的布局，适用于需要固定行列的布局。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Table Layout</title>
    <style>
        .table {
            display: table;
            width: 100%;
            border-collapse: collapse;
        }
        .row {
            display: table-row;
        }
        .cell {
            display: table-cell;
            border: 1px solid black;
            padding: 10px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="table">
        <div class="row">
            <div class="cell">Cell 1</div>
            <div class="cell">Cell 2</div>
            <div class="cell">Cell 3</div>
        </div>
        <div class="row">
            <div class="cell">Cell 4</div>
            <div class="cell">Cell 5</div>
            <div class="cell">Cell 6</div>
        </div>
    </div>
</body>
</html>

5. 多列布局 (Multi-column Layout)

多列布局使用 column-count、column-gap 等属性，可以用于文本内容的多列排布，相对于报纸和杂志的排版。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-column Layout</title>
    <style>
        .multicolumn {
            column-count: 3; /* 三列布局 */
            column-gap: 20px; /* 列间距 */
            padding: 20px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="multicolumn">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Pellentesque sollicitudin placerat diam, ac dapibus lorem dictum eget. 
        Proin vel nisl nec justo commodo consectetur. Nulla vestibulum nisi vitae dictum bibendum.
    </div>
</body>
</html>

6. Flexbox 布局

Flexbox 的基本概念

Flex 容器 (Flex Container) 和 Flex 项目 (Flex Items) :
- Flex 容器：包含了需要布局的所有元素。
- Flex 项目：容器内的子元素，是布局的直接对象。
定义 Flex 容器:
```
.container {
    display: flex;
}
```

Flex 容器的属性:

flex-direction: 定义主轴的方向（横向还是纵向）。

.container {
    flex-direction: row; /* 水平方向 (默认值) */
    /* 其他选项：row-reverse, column, column-reverse */
}

justify-content: 定义主轴上的对齐方式。

.container {
    justify-content: flex-start; /* 从头开始对齐 */
    /* 其他选项：flex-end, center, space-between, space-around, space-evenly */
}

align-items: 定义交叉轴上的对齐方式。

.container {
    align-items: stretch; /* 拉伸对齐（默认值） */
    /* 其他选项：flex-start, flex-end, center, baseline */
}

flex-wrap: 定义是否换行。

.container {
    flex-wrap: nowrap; /* 不换行（默认值） */
    /* 其他选项：wrap, wrap-reverse */
}

Flex 项目的属性:

order: 定义项目的排列顺序。

.item {
    order: 1; /* 默认值为 0，数值越小次序越靠前 */
}

flex-grow: 定义项目的放大比例。

.item {
    flex-grow: 1; /* 默认值为 0，不放大 */
}

flex-shrink: 定义项目的缩小比例。

.item {
    flex-shrink: 1; /* 默认值为 1，可缩小 */
}

flex-basis: 定义项目的基准大小。

.item {
    flex-basis: auto; /* 默认值，决定项目的初始大小 */
}

align-self: 定义项目在交叉轴上的对齐方式，覆盖 align-items。

.item {
    align-self: auto; /* 默认值 */
    /* 其他选项：flex-start, flex-end, center, baseline, stretch */
}

Example - 简单应用示例

以下是一个简单的 Flexbox 布局示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout</title>
    <style>
        .container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #000;
            padding: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

这个示例展示了一个简单的横向 Flexbox 布局，三个项目间隔均匀并在容器中垂直居中。

Flexbox 布局的优势

简化布局：无需复杂的浮动和清除浮动技巧。
动态调整：能够更好地响应不同的屏幕大小和内容变化。
易于居中：简化了垂直和水平方向上的居中对齐。
可控空间分配：更方便地分配剩余空间，控制元素尺寸。

借助 Flexbox，CSS 布局变得更加直观和强大，极大地提升了开发效率。学习并掌握 Flexbox 布局是现代前端开发的重要技能。

7. Grid 布局

CSS Grid Layout 是一种基于二维网格系统的布局方式，与 Flexbox 一维布局系统不同，Grid 布局允许我们同时控制行和列，从而创建更加复杂和精确的布局。以下是 Grid 布局的一些重要特性和基本使用方法。

Grid 布局的基本概念

网格容器 (Grid Container) 和网格项目 (Grid Items) :
- 网格容器：包含需要布局的所有子元素。
- 网格项目：容器内部的子元素，是布局的基本单位。
定义网格容器:
```
.container {
    display: grid;
}
```

网格容器的属性:

grid-template-columns 和 grid-template-rows: 定义行和列的框架结构。

.container {
    grid-template-columns: 100px 200px; /* 定义两列，宽度分别为100像素和200像素 */
    grid-template-rows: 150px 100px; /* 定义两行，高度分别为150像素和100像素 */
}

grid-gap, grid-column-gap, grid-row-gap:

.container {
    grid-gap: 10px; /* 行间距和列间距都设置为10像素 */
    grid-column-gap: 10px; /* 仅设置列间距 */
    grid-row-gap: 10px; /* 仅设置行间距 */
}

grid-area:

.container {
    grid-template-areas: 
      "header header"
      "sidebar content"
      "footer footer";
}
/* 定义网格项目以匹配 grid-template-areas */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

网格项目的属性:

grid-column-start 和 grid-column-end: 定义项目在网格中的水平起止位置。

.item {
    grid-column-start: 1;
    grid-column-end: 3; /* 跨两列 */
}

grid-row-start 和 grid-row-end: 定义项目在网格中的垂直起止位置。

.item {
    grid-row-start: 1;
    grid-row-end: 3; /* 跨两行 */
}

grid-column 和 grid-row:

.item {
    grid-column: 1 / 3; /* 从第一列到第三列 */
    grid-row: 1 / 3; /* 从第一行到第三行 */
}

grid-area: 定义项目在网格中的区域。
```
.item {
    grid-area: header;
}
```

Example - 简单的网格布局示例

以下是一个简单的Grid布局示例，它创建了一个响应式的三列布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 三等分列 */
            grid-gap: 10px; /* 设置行间距和列间距 */
        }
        .item {
            background-color: lightblue;
            padding: 20px;
            text-align: center;
            font-size: 1.2em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

这个示例展示了一个简单的三列网格布局，所有项目均匀分布在各网格单元中。

Grid 布局的优势

二维布局：同时控制行和列的排布，更加灵活。
简化复杂布局：相比传统布局方式，Grid 使复杂布局更简单、更直观。
精确控制：精确控制每一个网格单元的位置和大小。
响应式设计：通过媒体查询和单位调整，可以轻松创建响应式布局。
兼容性：已得到绝大多数现代浏览器的支持。

使用 Grid 布局，能够大大提升开发复杂网页布局的效率和灵活性。学习并掌握 Grid 布局，是前端开发者必备的重要技能之一。