目录
5，将父元素转变为行内块元素，display：inline-block
6，给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位
什么是外边距塌陷:
- 外边距合并也叫作外边距塌陷,当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是外边距塌陷的现象
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
}
.box {
width: 200px;
height: 200px;
background-color: teal;
/* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="box">
</div>
</div>
</body>
</html>
解决方法
1，给父元素加边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
/* 给父元素设置边框 */
/* border: 1px solid red; */
/* 或者 以下这种方式给父元素加边框但是不显示线*/
border: 1px solid transparent;
}
.box {
width: 200px;
height: 200px;
background-color: teal;
/* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="box">
</div>
</div>
</body>
</html>
2，给父元素设置padding挤下去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
/* 设置padding挤下去 */
/* 设置padding值后要加边框盒子不然会撑开盒子 */
box-sizing: border-box;
padding-top: 100px;
}
.box {
width: 200px;
height: 200px;
background-color: teal;
/* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
/* margin-top: 100px; */
}
</style>
</head>
<body>
<div class="father">
<div class="box">
</div>
</div>
</body>
</html> 
3，给父元素设置溢出隐藏，触发bfc机制：bfc全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
/* 给父元素设置溢出隐藏触发bfc机制 */
overflow: hidden;
}
.box {
width: 200px;
height: 200px;
background-color: teal;
/* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="box">
</div>
</div>
</body>
</html>
4， 给父元素或者子元素增加浮动，让其脱离标准流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
/* 给父元素或者子元素设置浮动*/
/* float: left; */
}
.box {
width: 200px;
height: 200px;
background-color: teal;
/* 给子元素设置margin-top 100px 想让子元素离父元素顶端距离100px,可是高度塌陷导致了父元素离body移动了100px,没达到想要的效果 */
margin-top: 100px;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="box">
</div>
</div>
</body>
</html>
5，将父元素转变为行内块元素，display：inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
/* 转换为行内块 */
display: inline-block;
}
.box {
width: 200px;
height: 200px;
background-color: teal;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="box">
</div>
</div>
</body>
</html>
6，给父元素或者子元素定位都可以，原理同样是使其脱离标准流，不过只能用绝对定位和固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
/* 给父元素或者子元素绝对定位或者固定定位 */
/* position: absolute; */
}
.box {
/* 给父元素或者子元素绝对定位或者固定定位 */
position: fixed;
width: 200px;
height: 200px;
background-color: teal;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="box">
</div>
</div>
</body>
</html>
7，给父元素增加flex或者inline-flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father {
width: 500px;
height: 500px;
background-color: red;
margin: 0 auto;
/* 给父元素增加flex或者inline-flex */
display: flex;
/* display: inline-flex; */
}
.box {
width: 200px;
height: 200px;
background-color: teal;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="box">
</div>
</div>
</body>
</html>
本文含有隐藏内容，请 开通VIP 后查看