# 1、flex
最简单是使用display:flex进行布局
html, body, #app {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
然后header为固定高度，container为flex：1； 然后container再次display:flex; flex-direction: column;然后两边width固定中间flex为1
# 2、利用clac()进行百分比布局
html,body,#app{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#content {
height: calc(100% - 60px);
width: 100%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
然后container中的left、middle、right都float left，但是左右两边固定宽度，中间用clac()进行计算
# 3、使用float布局框架
用margin为负值 ， position: relative，然后left为负值，定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css</title>
</head>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.main>div{
float: left;
}
.left {
width: 200px;
background: red;
margin-left: -100%;
}
.right{
width: 200px;
background: blue;
margin-left: -200px;
}
.middle{
width: 100%;
background: yellow;
}
.content{
margin-left: 200px;
margin-right: 200px;
}
</style>
<body>
<div class="main">
<div class="middle">
<div class="content">
中间
</div>
</div>
<div class="left">
左边
</div>
<div class="right">
右边
</div>
</div>
</body>
</html>
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
43
44
45
46
47
48
49
50
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
43
44
45
46
47
48
49
50
兼容性好，兼容若有主流浏览器，包括万恶的IE6；可以实现主要内容的优先加载
- 如果左右两列用position:absolute定位布局做外层设计需要有个包含块设置（否则是相对浏览器可视区域）这样会层级，页面控制相对麻烦；
- 用浮动布局的话， 中间层要做到先加载实现不了；
- flex布局低版本浏览器有些还不支持
# 4、Grid 网格布局display:grid;
网格布局（Grid）是最强大的CSS布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了
Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局****。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。