# CSS布局

CSS布局
- 常见布局方案
- 参考链接

# 常见布局方案

发展历程：

表格布局 > 定位布局 > 浮动布局 > Flex布局 > 网格布局 > 多列布局

还有一种多列布局比较少用。

# 表格布局

<table>默认设置了 table布局属性。

当这些属性被应用于非<table>元素时，就是表格布局。

常用于兼容一些不支持 Flex、Grid 的浏览器。

display: table：指定为表格容器（类比于<table>）
display: table-row：指定为表行（类比于<tr>）
display: table-cell：指定为单元格（类比于<td>、<th>）

# 定位布局

脱离标准流（absolute、fixed、sticky达到阈值后）。

position有以下属性：

static
- 默认定位
absolute
- 绝对定位（相对最近一个非static的父元素）
fixed
- 固定定位（相对浏览器视窗的左上角）
relative
- 相对定位（相对本身所在位置，原位置遵循标准文档流）
sticky
- 粘性定位（先保持static，达到阈值时变成fixed）
- 该定位遵循标准文档流，仍然保留元素原本在文档流中的位置

# 浮动布局

浮动布局脱离标准流，会影响 标准流的排列。

# 网格布局

从 行、列 上定义元素的排列。

不建议使用：兼容性（需IE10 及以上）、安卓低版本不支持

display: grid：将父元素设为网格容器。
grid-template-columns：定义列轨道
grid-template-rows：定义行轨道
grid-gap：定义行列之间的间隙

.container {
    display: grid;
    /* 定义 3种 不同宽度的列，分别为： 200px、自适应、200px */
    grid-template-colums: 200px auto 200px;
    /* 定义 2种 不同高度的行，分别为 100px、200px */
    grid-template-rows: 100px 200px;
    /* 定义行、列的间隙为20px */
    grid-gap: 20px;
}

1
2
3
4
5
6
7
8
9

如图所示：

# 多列布局

把内容 按列排序（类似报纸）：

colum-width，指定 按照至少某个宽度用尽可能多的列 来填充
column-count，指定 列的数量

# [扩展] 三列布局的实现

要求：三个元素：左、中、右，其中左、右固定宽度为200px，中间宽度自适应。（元素高度100px）

两列demo (opens new window)

<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

1
2
3
4
5

以下为 5种实现方式：

# Flex布局

思路：

父容器 flex
子元素需要固定的设置 width，需要自适应的设置 flex: 1

.container {
    display: flex;
    height: 100px;
}

.left,
.right {
    width: 200px;
}

.center {
    flex: 1;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 定位方式

思路：

父容器 relative
子元素 absolute；其中，需要固定的设置 width，需要自适应的设置 left、right 进行适应。

.container {
    position: relative;
    height: 100px;
}

.left,
.right {
    position: absolute;
    width: 200px;
    height: 100%;
}

.left {
    left: 0;
}

.right {
    right: 0; /* 通过绝对定位的 right: 0 撑开 */
}

.center {
    position: absolute;
    left: 200px;
    right: 200px;
    height: 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 浮动方式

思路：

不需要父容器，但要更换DOM排列：left、right、center
需要固定的元素设置 width、float一左一右；需要自适应的通过 margin 撑开

/* 
 * 注：因为浮动元素的前一个元素若为非浮动，则会紧贴底部
 * 所以这种方式需更换DOM的排列顺序：left、right、center
 */
.left,
.right {
    width: 200px;
    height: 100px;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    height: 100px;
    margin: 0 200px; /* 通过margin撑开 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 参考链接

BFC和浮动 →