布局
布局是 CSS 知识体系的重中之重
布局又称为版式布局,是网页UI设计师将有限的视觉元素进行有机的排列组合
早期以 table 为主(简单)
后来以技巧性布局为主(难)
现在有flexbox/grid(偏简单)
响应式布局是必备知识
常用布局方法:
table表格布局
float浮动+margin
inline-block布局
flexbox布局(正统布局方式)
div 块独占一行
float
| <div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
<div class="div6">div6</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | div {
width: 300px;
height: 300px;
border: 1px solid black;
/* float: left; */
background: greenyellow;
}
.div1, .div2 {
float: left;
background: red;
width: 150px;
height: 100px;
}
.div3 {
clear: both;
}
|
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 | div {
width: 300px;
height: 300px;
border: 1px solid black;
/* float: left; */
background: greenyellow;
}
.div1, .div2 {
float: left;
background: red;
width: 150px;
height: 100px;
}
.div3 {
clear: both;
}
.div4 {
float: right;
background: blue;
width: 150px;
height: 100px;
}
.div5 {
clear: both;
}
|
| <div class="container">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
<div class="div5">div5</div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 | div {
border: 1px solid black;
background: greenyellow;
}
.div1, .div2, .div3, .div4, .div5 {
float: left;
background: red;
width: 200px;
height: 200px;
}
/* 伪元素 是一个行元素 清理浮动*/
.container::after {
content: " ";
/* 变成块元素 */
display: block;
clear: both;
}
|
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 | div {
/* border: 1px solid black; */
background: greenyellow;
margin: 20px;
}
.div1 {
width: 200px;
height: 200px;
background: green;
}
.div2, .div3, .div4, .div5 {
float: left;
background: red;
width: 200px;
height: 200px;
}
/* 伪元素 是一个行元素 清理浮动*/
/* .container::after {
content: " "; */
/* 变成块元素 */
/* display: block;
clear: both;
} */
/* 伪元素 清理浮动和 margin */
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
|
一列布局
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 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>一列布局</title>
<style>
body { margin: 0; padding: 0; }
.top {
height: 100px;
background: blue;
}
.main {
width: 800px;
height: 300px;
background: #ccc;
margin: 0 auto;
}
.foot {
width: 800px;
height: 100px;
background: #900;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="main"></div>
<div class="foot"></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 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style>
body { margin: 0; padding: 0; }
.main {
width: 800px;
margin: 0 auto;
}
.left {
width: 20%;
height: 500px;
float: left;
background: #ccc;
}
.right {
width: 80%;
height: 500px;
float: right;
background: #ddd;
}
</style>
</head>
<body>
<div class="main">
<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 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style>
body { margin: 0; padding: 0; }
.left {
width: 200px;
height: 500px;
background: #ccc;
position: absolute;
left: 0;
top: 0;
}
.middle {
height: 500px;
background: #999;
margin: 0 310px 0 210px
}
.right {
width: 300px;
height: 500px;
background: #ddd;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div class="left">200px</div>
<div class="middle">中间</div>
<div class="right">300px</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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69 | <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>混合布局</title>
<style>
body { margin: 0; padding: 0; }
.top {
height: 100px;
background: blue;
}
.head {
height: 100px;
width: 800px;
background: #f60;
margin: 0 auto;
}
.main {
width: 800px;
height: 600px;
background: #ccc;
margin: 0 auto;
}
.left {
width: 200px;
height: 600px;
float: left;
background: yellow;
}
.right {
width: 600px;
height: 600px;
float: right;
background: #369;
}
.sub_l {
width: 400px;
height: 600px;
float: left;
background: green;
}
.sub_r {
width: 200px;
height: 600px;
float: right;
background: #09F;
}
.foot {
width: 800px;
height: 100px;
background: #900;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="top">
<div class="head"></div>
</div>
<div class="main">
<div class="left"></div>
<div class="right">
<div class="sub_l"></div>
<div class="sub_r"></div>
</div>
</div>
<div class="foot"></div>
</body>
</html>
|
float
元素“浮动”;脱离文档流,但不脱离文本流
对自身的影响:形成“块”(BFC);位置尽量靠上;
对兄弟的影响:上面贴非float元素;旁边贴float元素;不影响其它块级元素位置;影响其它块级元素内部文本
对父级元素的影响;从布局上“消失”;高度塌陷;
flexbox
弹性盒子
盒子本来就是并列的
指定宽度即可
display: flex
flex: 1
inline-block
像文本一样排block元素;没有清除浮动等问题;需要处理间隙