本文由 简悦 SimpRead 转码， 原文地址 juejin.cn
在面试中我们经常会被问到一个简单的问题，那就是 “实现一个三栏布局，左右固定，中间自适应”。
在面试中我们经常会被问到一个简单的问题，那就是 “实现一个三栏布局，左右固定，中间自适应”。这个问题就是考察知识点就是页面布局，我们是实际的项目开发中，也经常会遇到这个问题。其实我发现一个前端开发人员有一个通病，包括我自己也是，“觉得 CSS 不是很重要，不需要深入的学习”，这其实是一个比较糟心的想法。在项目中经常出现错乱的布局，但是并不知道原因。所以我们今天来简单总结一下有那些方式可以实现三栏布局。
一、浮动布局
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
27
28
29
30
31
|
<template>
<div>
<div>1</div>
<div>3</div>
<div>2</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box > div {
min-height: 100px;
}
.left {
float: left;
width: 100px;
background: red;
}
.content {
background: yellow;
}
.right {
float: right;
width: 100px;
background: blue;
}
</style>
复制代码
|
这种布局方式是利用浮动脱离文档流实现的，这里需要特别注意一下，left、right 都在 content 前面布局，如果按照正常的顺序 left-content-right，中间元素形成定位，那么就会将 right 顶下去。无法实现三栏布局。
浮动元素特征：脱离文档流，允许文本和内联元素环绕它。该元素从网页的正常流动 (文档流) 中移除，尽管仍然保持部分的流动性。 也就是说，如果一个父盒子中有两个子元素，其中一个子元素浮动，若另一个元素为块级元素，则会无视浮动元素， 被浮动元素覆盖；若另一个元素为内联元素，则会环绕浮动元素。
优点：兼容性好。
缺点：元素脱离文档流，产生浮动。
二、定位布局
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
27
28
29
30
31
32
33
34
35
36
37
|
<template>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
position: relative;
}
.box > div {
min-height: 100px;
position: absolute;
}
.left {
left: 0px;
width: 100px;
background: red;
}
.content {
left: 100px;
right: 100px;
background: yellow;
}
.right {
right: 0px;
width: 100px;
background: blue;
}
</style>
复制代码
|
优点：简单，适合快速开发页面。
缺点：元素脱离文档流，导致后面的元素也会脱离文档流，可使用性比较差。
三、flex 布局
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
27
28
29
30
31
32
33
|
<template>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
display: flex;
}
.box > div {
min-height: 100px;
}
.left {
width: 100px;
background: red;
}
.content {
flex: 1;
background: yellow;
}
.right {
width: 100px;
background: blue;
}
</style>
复制代码
|
优点：开发简单易上手。
缺点：这在移动端开发非常常见，但 PC 端 IE8 不兼容。
四、table 布局
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
27
28
29
30
31
32
33
34
|
<template>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
display: table;
width: 100%;
min-height: 100px;
}
.box > div {
display: table-cell;
}
.left {
width: 100px;
background: red;
}
.content {
background: yellow;
}
.right {
width: 100px;
background: blue;
}
</style>
复制代码
|
优点：兼容性好。
缺点：曾经风靡一时，但是现在基本被放弃了。
五、gird 布局
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
27
28
29
30
31
|
<template>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
display: grid;
grid-template-columns: 100px 1fr 100px;
}
.box > div {
min-height: 100px;
}
.left {
background: red;
}
.content {
background: yellow;
}
.right {
background: blue;
}
</style>
复制代码
|
优点：简单。两行关键代码搞定。
缺点：兼容性差。
六、浮动布局第二种方式。
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<template>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box > div {
min-height: 100px;
}
.left {
float: left;
width: 100px;
background: red;
position: relative;
z-index: 9999;
}
.content {
float: left;
width: 100%;
margin-left: -100px;
background: yellow;
padding: 0 100px;
/* z-index: 1; */
position: relative;
}
.right {
float: left;
width: 100px;
margin-left: -100px;
background: blue;
z-index: 1;
position: relative;
}
</style>
复制代码
|
优点：黑科技。
缺点：代码太多了，记不住呀。