前端课程——布局
布局
第一步拆解页面布局：按照垂直方向进行划分
第二步拆解页面布局：按照水平方向进行分化
第三步拆解页面局部：垂直方向继续划分
| 布局名称 | 说明 |
|---|---|
| 块布局 | 用来布置文件。块布局包含以文档为中心的功能。 |
| 行内布局 | 用来布置文本 |
| 表格布局 | 用来布置表格 |
| 定位布局 | 用来对那些与其他元素五交互的定位元素进行布置 |
| 弹性盒子布局 | 用来布置那些可以顺利调整大小的复杂页面。 |
| 网格布局 | 用来布置那些与一个固定网格相关的元素. |
居中布局
垂直方向
vertical-align前提：为父级元素设置display
1
2
3
4/*
1. 将父级元素改为 display:table-cell
2. 为父级元素设置 vertical-align：middle
*/定位(相对定位)
1
2
3
4
5
61. 为父级开启相对定位
2. 为子级元素开启绝对定位
3. 设置属性
top:50%
transform:translateX(一半的值)
也可以使用margin-top真实代码
第一种
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<!-- 第一种方式 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
height: 600px;
width: 700px;
border: 1px solid gray;
/* 为父级设置vertical-align属性即可 */
display: table-cell;
vertical-align: middle;
}
.b {
width: 300px;
height: 350px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></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<!-- 第二种方式 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
height: 600px;
width: 700px;
border: 1px solid gray;
position: relative;
}
.b {
width: 300px;
height: 300px;
background-color: lightcoral;
position: absolute;
top: 50%;
/* 此div的高度的50% */
transform: translateY(-150px);
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>
水平方向
外边距（
margin: 0 auto）如果当前容器元素或后代元素中包含文本内容，该文本内容居中显示
text-align属性(可继承)原本的作用就是实现文本居中显示
定位（一般使用相对定位，因为不脱离文档流）
只有在父级容器开启定位后，才是相对于父级进行定位
1
2
3
4
5
6/*
a)将 left 偏移量设置为 50%
b)将子级元素向左移动(子级元素宽度的1/2)
*/
transform: translateX(-150px) - CSS3新增属性
margin-left: -150px
真实代码：
第一种
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
height: 300px;
width: 400px;
border: 1px solid gray;
}
.b {
width: 200px;
height: 150px;
background-color: lightcoral;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
height: 300px;
width: 400px;
border: 1px solid gray;
/*
为父级设置text-align属性
- 子级必须是行内块级元素
- 因为此属性具有遗传性，因此会将子元素中的元素也居中
*/
text-align: center;
}
.b {
width: 200px;
height: 150px;
background-color: lightcoral;
display: inline-block;
/* 解决子级元素居中问题 */
text-align: left;
}
</style>
</head>
<body>
<div class="a">
<div class="b">测试文字</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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
height: 300px;
width: 400px;
border: 1px solid gray;
position: relative;
}
.b {
width: 200px;
height: 150px;
background-color: lightcoral;
left: 50%;
/*
父级元素必须开启定位
此值为此元素宽度的一半（50%）
*/
transform: translateX(100px);
}
</style>
</head>
<body>
<div class="a">
<div class="b">测试文字</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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
height: 300px;
width: 400px;
border: 1px solid gray;
position: relative;
}
.b {
width: 200px;
height: 150px;
background-color: lightcoral;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="a">
<div class="b"></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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
height: 300px;
width: 400px;
border: 1px solid gray;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.b {
width: 200px;
height: 150px;
background-color: lightcoral;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
height: 300px;
width: 400px;
border: 1px solid gray;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.b {
width: 200px;
height: 150px;
background-color: lightcoral;
display: inline-block;
text-align: left;
}
</style>
</head>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
</html>
多列布局
两列布局
一列定宽，一列自适应 关键在于自适应列
第一种
这种方式存在的问题：如果改变左边div的宽度，则需要同时改变右边div的左外边距(
margin-left)。解决方案 ：可以将
margin-left修改为overflow:hidden（但依然存在问题：内容溢出隐藏）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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 600px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
.left {
width: 200px;
height: 100%;
background-color: lightcoral;
/* 为左边div设置浮动 */
float: left;
}
.right {
height: 100%;
background-color: lightskyblue;
/* 可以将外边距设置为 overflow:hidden */
margin-left: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>第二种
table-cell属性说明设置定宽 则自适应
不设置则自适应
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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 600px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
display: table;
table-layout: fixed;
}
.left,.right{
display: table-cell;
}
.left {
width: 200px;
height: 100%;
background-color: lightcoral;
}
.right {
height: 100%;
background-color: lightskyblue;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="container">
<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
37
38
39
40
41
42
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width: 800px;
height: 400px;
border: 1px solid gray;
margin: 0 auto;
}
.column{
width: 25%;
height: 100%;
float: left;
box-sizing: border-box;
}
.box1{
background-color: lightcoral;
}
.box2{
background-color: lightgreen;
}
.box3{
background-color: lightskyblue;
}
.box4{
background-color: lightpink;
}
</style>
</head>
<body>
<div class="container">
<div class="column box1"></div>
<div class="column box2"></div>
<div class="column box3"></div>
<div class="column box4"></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
41
42
43
44
45
46
47
48
49
50
51
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 800px;
height: 400px;
border: 1px solid gray;
margin: 0 auto;
display: table;
table-layout: fixed;
}
.column {
height: 100%;
box-sizing: border-box;
display: table-cell;
}
.box1 {
background-color: lightcoral;
}
.box2 {
background-color: lightgreen;
}
.box3 {
background-color: lightskyblue;
}
.box4 {
background-color: lightpink;
}
</style>
</head>
<body>
<div class="container">
<div class="column box1"></div>
<div class="column box2"></div>
<div class="column box3"></div>
<div class="column box4"></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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
margin: 0 auto;
padding: 0;
border: 1px solid gray;
width: 800px;
height: 400px;
}
.column {
list-style: none;
float: left;
width: 25%;
height: 100%;
}
</style>
</head>
<body>
<ul class="container">
<li class="column">示例样式</li>
<li class="column">示例样式</li>
<li class="column">示例样式</li>
<li class="column">示例样式</li>
</ul>
</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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 800px;
height: 400px;
border: 1px solid gray;
margin: 0 auto;
display: table;
table-layout: fixed;
}
.left,
.right {
/* 表格中的单元格默认时等高的 */
display: table-cell;
}
.left {
width: 300px;
background-color: lightcoral;
}
.right {
width: 300px;
background-color: lightskyblue;
}
</style>
</head>
<body>
<div class="container">
<div class="column left"></div>
<div class="column right"></div>
</div>
</body>
</html>
全屏布局
没有滚动条，布局根据窗口大小改变。
宽度问题
直接设置成100%即可
高度问题
- 为body设置
height:100%,为子级元素设置height:100% vh单位，即设置height:100vh即可
- 为body设置
实现方案1
1 |
|
实现方案2
1 |
|
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小康博客！
打赏
![wechat]()
wechat![alipay]()
alipay
评论
TwikooWaline
