# CSS布局
等高布局实现用flex和table-cell。
# 一、左右宽度固定，中间自适应
# 1、浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout div {
min-height: 150px;
}
.layout .left {
float: left;
width: 300px;
background: red;
}
.layout .center {
background: yellow;
}
.layout .right {
float: right;
width: 300px;
background: blue;
}
</style>
</head>
<body>
<!--浮动布局 -->
<section class="layout">
<h1>三栏布局</h1>
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>浮动解决方案</h2>
这种布局方式，dom结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。
</div>
</section>
</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
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
这种布局方式，dom结构必须是先写浮动部分，然后再中间块，否则右浮动块会掉到下一行。
浮动布局的优点就是比较简单，兼容性也比较好。但浮动布局是有局限性的，浮动元素脱离文档流，要做清除浮动，这个处理不好的话，会带来很多问题，比如父容器高度塌陷等。
# 2、绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout div {
min-height: 150px;
}
.layout .left {
left: 0;
width: 300px;
background: red;
position: absolute;
}
.layout .center {
/*right: 300px;
position:absolute;
left: 300px;*/
background: yellow;
margin: 0 300px
}
.layout .right {
right: 0;
width: 300px;
background: blue;
position: absolute;
}
</style>
</head>
<body>
<!--绝对定位布局 -->
<section class="layout">
<h1>三栏布局</h1>
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
中间的部分可以用margin撑开，也可以用position,left,right撑开。中间的center也可以放在right后面
</div>
</section>
</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
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
绝对定位布局优点就是快捷，设置很方便，而且也不容易出问题。缺点就是，容器脱离了文档流，后代元素也脱离了文档流，高度未知的时候，会有问题，这就导致了这种方法的有效性和可使用性是比较差的。
# 3、flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout div {
min-height: 150px;
}
.layout .father{
display: flex;
}
.layout .left {
width: 300px;
background: red;
}
.layout .center {
flex: 1; /*自适应的原理*/
background: yellow;
}
.layout .right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<!--flexbox布局 -->
<section class="layout">
<h1>三栏布局</h1>
<div class="father">
<div class="left"></div>
<div class="center">
<h2>flexbox解决方案</h2>
中间的部分用flex:1
</div>
<div class="right"></div>
</div>
</section>
</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
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
flexbox布局是css3里新出的一个，它就是为了解决上述两种方式的不足出现的，是比较完美的一个。目前移动端的布局也都是用flexbox。 flexbox的缺点就是IE10开始支持，但是IE10的是-ms形式的。
# 4、表格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout .father{
display: table; /*父元素display:table*/
height: 150px;
width: 100%; /*一定要设置100%*/
}
.layout .father div{
display: table-cell; /*子元素dislay:table-cell*/
}
.layout .left {
width: 300px;
background: red;
}
.layout .center {
background: yellow;
}
.layout .right {
width: 300px;
background: blue;
}
</style>
</head>
<body>
<!--table布局 -->
<section class="layout">
<h1>三栏布局</h1>
<div class="father">
<div class="left"></div>
<div class="center">
<h2>table解决方案</h2>
父元素display:table，子元素dislay:table-cell
</div>
<div class="right"></div>
</div>
</section>
</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
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
表格布局的兼容性很好，在flex布局不兼容的时候，可以尝试表格布局。当内容溢出时会自动撑开父元素。
表格布局也是有缺陷:①无法设置栏边距；②对seo不友好；③当其中一个单元格高度超出的时候，两侧的单元格也是会跟着一起变高的，然而有时候这并不是我们想要的效果。
# 5、网格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layout</title>
<style>
html * {
padding: 0;
margin: 0;
}
.layout .father{
display: grid; /*网格布局*/
width: 100%; /*设置100%*/
grid-template-columns: 300px auto 300px; /*每列的宽度*/
grid-template-rows: 150px;/* 每行的高度*/
}
.layout .left {
background: red;
}
.layout .center {
background: yellow;
}
.layout .right {
background: blue;
}
</style>
</head>
<body>
<!--网格布局 -->
<section class="layout">
<h1>三栏布局</h1>
<div class="father">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
父元素display
</div>
<div class="right"></div>
</div>
</section>
</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
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
Grid是创建网格布局最强大和最简单的工具。就像表格一样，网格布局可以让Web设计师根据元素按列或行对齐排列，但他和表格不同，网格布局没有内容结构，从而使各种布局不可能与表格一样。例如，一个网格布局中的子元素都可以定位自己的位置，这样他们可以重叠和类似元素定位。
但网格布局的兼容性不好。IE10+上支持，而且也仅支持部分属性。
当三列的高度不一样时，上述5种布局还能继续使用的是flex布局和表格布局，其它3种都出现问题。因为flex布局和表格布局三列的高度会自动等高(这两种会自动等高)
浮动布局如果还需要实现等高，则需要用到BFC。
# 二、上下高度固定，中间自适应
# 1、绝对定位
上中下三个都设为absolute，上面top:0，下面bottom:0，中间设置top和bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>absolute</title>
<style>
html,body{
height:100%;
}
</style>
</head>
<body>
<style>
.container>div {
position: absolute;
width : 100%;
}
.header {
top: 0;
height: 100px;
background-color: red;
}
.body {
top: 100px;
bottom: 100px;
background-color: blue;
}
.footer {
bottom: 0;
height: 100px;
background-color: red;
}
</style>
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></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
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
# 2、flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flex</title>
<style>
html,body{
height:100%;
}
</style>
</head>
<body>
<style>
.container {
height: 100%;
display: flex;
flex-direction: column;
}
.body {
flex: 1 1 auto; //自适应
background-color: blue;
}
.header, .footer {
height: 100px;
flex: 0 0 auto; // 不放大不缩小
background-color: red;
}
</style>
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></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
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
# 3、网格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
<style>
html,body{
height:100%;
}
</style>
</head>
<body>
<style>
.container {
display: grid;
height : 100%;
grid-template-rows : 100px auto 100px;
}
.header, .footer{
background-color:red;
}
.body {
background-color:blue;
}
</style>
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></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
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
# 4、表格布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style>
html,body{
height:100%;
}
</style>
</head>
<body>
<style>
.container {
display: table;
height : 100%;
width :100%;
}
.container>div{
display: table-row; //使该元素按tr样式渲染
}
.header, .footer {
height:100px;
background-color:red;
}
.body {
background-color:blue;
}
</style>
<div class="container">
<div class="header"></div>
<div class="body"></div>
<div class="footer"></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
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
以下布局和三栏布局的类似：
# 三、Flex布局和网格布局
← CSS的特殊性和优先级 移动端常见问题 →