常见案例
... 2022-2-16 Less than 1 minute
# 常见案例
# 双飞翼布局
查看演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局 + 多栏等高</title>
<style>
.box {
/* 触发BFC */
overflow: hidden;
}
/* 三块同时浮动 */
.box>div {
float: left;
/* 实现珊栏布局 */
margin-bottom: -99999px;
padding-bottom: 99999px;
word-wrap: break-word;
}
.left {
/* 两边定宽，往左拉父级的宽度，绝对在左边 */
width: 200px;
background: cyan;
margin-left: -100%;
}
.right {
/* 右边相当于往左拉自己的宽度，拉到屏幕以外，正好弹到上面去 */
width: 300px;
background: deeppink;
margin-left: -300px;
}
.middle {
/* 左右两边都就位了，中间就会在他们的下面 */
width: 100%;
min-height: 10px;
background: #1abc9c;
}
.content {
/* 在中间的容器中加入content内容区域并且将左右的两边的宽margin掉就好了 */
margin: 0 300px 0 200px;
word-wrap: break-word;
}
header,
footer {
width: 100%;
height: 100px;
background: pink;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<header>我是头部</header>
<main class="box">
<div class="middle">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</main>
<footer>我是尾部</footer>
<!-- 稍加变化就可以实现两栏布局 -->
</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
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
# 圣杯布局
查看演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style>
/* 思想和双飞翼布局大同小异 */
.box {
overflow: hidden;
padding: 0 300px 0 200px;
}
/* 重要是把这个地方想明白就好了 */
.left,
.middle,
.right {
float: left;
margin-bottom: -99999px;
padding-bottom: 99999px;
position: relative;
}
.left {
width: 200px;
background: cyan;
margin-left: -100%;
left: -200px;
}
.right {
width: 300px;
background: deeppink;
margin-left: -300px;
right: -300px;
}
.middle {
width: 100%;
min-height: 10px;
background: #1abc9c;
}
header,footer {
width: 100%;
height: 100px;
background: pink;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<header>我是头部</header>
<main class="box">
<div class="middle">
</div>
<div class="left"></div>
<div class="right"></div>
</main>
<footer>我是尾部</footer>
<!-- 稍加变化就可以实现两栏布局 -->
</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
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
# 将元素水平垂直居中的三种常见的方法
查看演示代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>元素的垂直水平居中</title>
<style>
/* 注意兼容性 */
/* 给相同的容器 */
.container {
width: 500px;
height: 500px;
overflow: hidden;
}
li{
float: left;
}
/* 第一种情况 */
.situation1 {
width: 200px;
height: 300px;
background: cyan;
overflow: hidden;
}
.situation1 div {
width: 100px;
height: 100px;
margin-top: 100px;
margin-left: 50px;
background: pink;
}
/* 第二种情况 */
.situation2 {
position: relative;
width: 70%;
height: 50%;
background: cyan;
}
.situation2 div {
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
/* 第三种情况 */
.situation3 {
position: relative;
width: 80%;
height: 67%;
background: cyan;
}
.situation3 div {
width: 40%;
height: 35%;
background: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.situation4 {
width: 500px;
height: 500px;
background: cyan;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.situation4 div{
background-color: #000;
display: inline-block;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<ol>
<li>
<span>已知父元素和子元素宽高</span>
<div class="container">
<div class="situation1">
<div>
</div>
</div>
</div>
</li>
<li>
<span>已知子元素的宽高父元素宽高未知</span>
<div class="container">
<div class="situation2">
<div></div>
</div>
</div>
</li>
<li>
<span>父元素和子元素的高度未知</span>
<div class="container">
<div class="situation3">
<div></div>
</div>
</div>
</li>
<li>
<span>table居中</span>
<div class="container">
<div class="situation4">
<div></div>
</div>
</div>
</li>
</ol>
</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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122