盒子嵌套关系中的塌陷现象

发表于 | 更新于: | 分类于 | | 阅读次数:
字数统计: 394 | 阅读时长 ≈ 2

当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合。
（2）为父盒子添加overflow: hidden;
（3）为父盒子设定padding值。

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		div {
		    box-sizing: border-box; /*防止增加内边距和border会改变盒子的宽高*/
		}
		
		/*不解决塌陷现象,fbox1出现塌陷现象*/
		.fbox1{
			width: 200px;
			height:200px;
			background-color: green;
		}
		.sbox1{
			width: 100px;
			height:100px;
			background-color: red;
			margin-top: 100px;
		}
		
		/*解决塌陷现象方法一*/
		.fbox2{
			width: 200px;
			height:200px;
			background-color: pink;
			/*添加一个边框属性。解决塌陷现象*/
			border: solid;
		}
		.sbox2{
			width: 100px;
			height:100px;
			background-color: red;
			margin-top: 100px;
		}

		/*解决塌陷现象方法二*/
		.fbox3{
			width: 200px;
			height:200px;
			background-color: skyblue;
			/*添加overflow: hidden;。解决塌陷现象*/
			overflow: hidden;
		}
		.sbox3{
			width: 100px;
			height:100px;
			background-color: red;
			margin-top: 100px;
		}

		/*解决塌陷现象方法三*/
		.fbox4{
			width: 200px;
			height:200px;
			background-color: gray;
			/*为父盒子设定padding值。解决塌陷现象*/
			padding: 1px;
		}
		.sbox4{
			width: 100px;
			height:100px;
			background-color: red;
			margin-top: 100px;
		}
	</style>
</head>
<body>
	<div class="fbox1">
		<div class="sbox1"></div>
	</div>
	<div class="fbox2">
		<div class="sbox2"></div>
	</div>
	<div class="fbox3">
		<div class="sbox3"></div>
	</div>
	<div class="fbox4">
		<div class="sbox4"></div>
	</div>
</body>
</html>

we



----------- 本文结束 -----------




如果你觉得我的文章对你有帮助，你可以打赏我哦~
0%