本文最后更新于：8 个月前
两栏布局、经典三栏布局、水平垂直居中
CSS（八）布局
一、两栏布局
两栏布局的实现思路基本都是：一侧宽度固定（一般是左侧）、另一侧宽度自适应（一般是右侧）。
下面是一些常见的实现方式：
- 利用浮动，左侧宽度固定，右侧元素设置
margin-left等于左侧宽度。
- 利用浮动，左侧宽度固定，右侧元素触发为
BFC。
- 利用
flex布局，左边宽度固定，右边元素设置flex:1
- 利用绝对定位，左边元素设置
position:absolute，宽度固定，右边元素margin-left为左侧元素宽度
- 利用绝对定位，左侧宽度固定，右侧元素
absolute定位，left值设置为左侧元素宽度
二、经典三栏布局
「圣杯布局」和「双飞翼布局」，这两种布局相同的目的都是：让中间部分的内容优先加载。
在实现思路上的共同点是：两侧宽度固定，中间宽度自适应。
实现技术总结：
- 三栏都使用
float 布局。
- 两侧使用
margin 负值，以便和中间内容横向重叠。
- 防止中间内容被两侧覆盖，圣杯布局用
padding ，双飞翼布局用 margin
2.1、圣杯布局
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
| <!DOCTYPE html>
<html lang="en">
<head>
<title>圣杯布局示例</title>
<style>
.bfc{
overflow: hidden;
padding-left: 200px;
padding-right: 200px;
border: 1px solid black;
}
.bfc div{
float: left;
height: 200px;
}
.left{
width: 200px;
margin-left: -100%;
background-color: red;
position: relative;
left: -200px;
}
.center{
width: 100%;
background-color: green;
}
.right{
width: 200px;
margin-right: -200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="bfc">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
|
2.2、双飞翼布局
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
| <!DOCTYPE html>
<html lang="en">
<head>
<title>CSS示例</title>
<style>
.container{
border: 1px solid black;
overflow: auto;
margin-bottom: 50px;
}
.float{
float: left;
}
.center{
width: 100%;
}
.main{
height: 200px;
margin-left: 200px;
margin-right: 200px;
background-color: green;
}
.left{
width: 200px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right{
width: 200px;
height: 200px;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="center float">
<div class="main"></div>
</div>
<div class="left float"></div>
<div class="right float"></div>
</div>
</body>
</html>
|
2.3、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
34
35
36
37
38
39
40
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS示例：flex实现经典三栏布局</title>
<style>
.flex{
display: flex;
}
.container div{
height: 200px;
color: white;
font-weight: bolder;
}
.left{
width: 200px;
background-color: red;
order: 1;
}
.center{
order: 2;
flex: 1;
background-color: green;
}
.right{
width: 200px;
background-color: blue;
order: 3;
}
</style>
</head>
<body>
<div class="container flex">
<div class="center">实现方式是：在flex容器中，使用order属性决定每个flex项目的排列顺序，
虽然html中center写在前，但center的order比left的后</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
|
三、水平垂直居中布局
3.1、flex居中
该方法最为灵活，可以不指定容器的宽高
1
2
3
4
5
| .container{
display:flex;
justify-content:center;
align-items:center;
}
|
利用绝对定位，使用left和top使元素左上角居中，然后使用translate微调位置，该方法可以不定宽高
1
2
3
4
5
6
7
8
9
| .container{
position:relative;
}
.center{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
|
3.3、绝对定位+margin
同上，但是不使用translate微调位置，而是使用margin-left和margin-top来微调位置，值分别为元素宽高的一半（前提是：需要指定元素宽高）
1
2
3
4
5
6
7
8
9
10
11
12
| .container{
position:relative;
}
.center{
position:absolute;
left:50%;
top:50%;
width:200px;
height:200px;
margin-left: -100px;
maring-right:-100px;
}
|
3.4、绝对定位+margin: auto
利用绝对定位，子元素所有方向为0，将margin设置为auto（如果没有margin属性，默认在左上角），子元素必须有宽高
1
2
3
4
5
6
7
8
9
10
11
12
13
| .container{
position:relative;
}
.center{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
height:100px;
width:100px;
}
|