布局类
# 布局类
# 两边固定中间自适应
# 使用 flex 布局
<style>
.box {
position: relative;
width: 100%;
/* 要有明确的高度，不能自动，否则会不生效 */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.top {
width: 100%;
/* 要有明确的高度 */
height: 50px;
}
.center {
flex: 1;
width: 100%;
height: 100%;
/* 在区域内滚动 */
overflow: auto;
}
.bottom {
width: 100%;
/* 要有明确的高度 */
height: 100px;
}
</style>
<body>
<div class="box">
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</div>
</body>
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
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
# 使用定位
<style>
.box {
position: relative;
}
.left {
position: absolute;
width: 200px;
left: 0;
}
.right {
position: absolute;
width: 100px;
right: 0;
}
.center {
/* 要与left的 width保持一致 */
margin-left: 200px;
/* 要与right的宽度保持一致 */
margin-right: 100px;
width: 100%;
}
</style>
<body>
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
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
# 使用浮动
<style>
.left {
float: left;
}
.right {
float: right;
}
.center {
overflow: hidden;
}
</style>
<body>
<!-- 注意, 盒子的位置需要发生变化 -->
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 网格布局 grid
- 显式网格属性
grid-template-rows、grid-template-columns、grid-template-areas - 隐式网格属性：
grid-auto-rows、grid-auto-columns、grid-auto-flow - 间距属性：
grid-column-gap、grid-row-gap
# 网格布局水平垂直居中
<div class="wp">
<div class="box">123123</div>
</div>
<style>
.wp {
display: grid;
}
.box {
align-self: center;
justify-self: center;
}
</style>
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