<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
width: 0;
}
.demo1{
/* margin-left: 100px;
margin-top: 100px; */
height: 100px;
width: 100px;
background-color: black;
}
.demo2{
height: 50px;
width: 50px;
/* margin-left: 50px;
margin-top: 50px; */
background-color: green;
}
</style>
<title></title>
</head>
<body>
<div class="demo1">
<div class="demo2"></div>
</div>
</body>
</html>
现在给得demo2的父级demo1设置margin-left: 100px;margin-top: 100px;demo1就会带着他的儿子demo2移动成下面这样:
下面再给demo2设置margin-left: 50px;demo1就会相对他的父亲向右移动成下面这样:
当你在设置demo2的margin-top: 50px;时候,你会惊奇的发现没有什么变化,就算我改成margin-top: 100px;他还是没有变化!
你只有加到比他父亲demo1的margin还大的时候,他才会带着他的父亲一起向下移动。比如demo2的margin-top: 150px;
这样的现象叫作margin塌陷:
垂直方向的margin,父子元素是结合到一起的,会取最大的margin移动。
怎样解决呢?
首先很low的方法:
给demo2的父亲demo1加个边线,border-top: 1px solid red;
这种手法肯定不行,不专业吧,虽然是1培训你看不出来,就是改成0.5px也不行。
专业的方法:——bfc
专业名词:block format content(块级格式化上下文)
CSS会把HTML的每一个元素都当成一个盒子,而且他进一步认为每一个盒子里面都有一套渲染规则,就是你写完这个代码,他会按照你写得代码把这个东西绘制出来,bfc就是通过一些方法让一个盒子或几个盒子里面的渲染规则发生改变(他只会改变一丁点,比如有1000条规则,bfc只会改变0.1条都不到,就是改变这一丁点,bfc就把margin塌陷给解决了)。
如何触发一个盒子的bfc:
一:给盒子设置position: absolute;设置定位之后这个盒子就自然成了bfc元素了。
二:display: inline-block;
三:float: left/right;浮动
四:overflow: hidden;溢出部分隐藏
咱们先从第四个方法讲起:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
width: 0;
}
.demo1{
margin-left: 100px;
margin-top: 100px;
height: 100px;
width: 100px;
background-color: black;
/* overflow: hidden; */
}
.demo2{
height: 50px;
width: 50px;
margin-left: 75px;
/* margin-top: 150px; */
background-color: green;
}
</style>
<title></title>
</head>
<body>
<div class="demo1">
<div class="demo2"></div>
</div>
</body>
</html>
现在我把demo2的margin-top: 150px;注释掉,再把demo2的margin-left改成75像素,demo2就会出来,如下图
我在给demo1加一个overflow: hidden;demo2在demo1外面的部分就会隐藏,如下:
overflow: hidden;叫做溢出盒子的部分隐藏。
现在我把demo2的margin-left改成50px;再加上margin-top: 150px;
你会发现demo2全部出了demo1,所以demo2就会被全部隐藏。现在我再把demo2的margin-top设置成50px;如下:
说明margin塌陷的问题已经解决了吧。
你把demo1的overflow: hidden;注释掉,改成display: inline-block;也好使,改成position: absolute;也好使,都能触发bfc,解决margin塌陷问题。
但是这个bug没有完美的办法解决,咱只能用一些方法来弥补,你会发现这些方法都能解决margin塌陷问题,到那时解决问题的同时他们也带来的新的问题,比如overflow: hidden;,我里面的内容就是想溢出盒子的,你加overflow: hidden;还合适吗?不合适!还比如:我这个盒子就像好好的摆在那里,后面的元素罗列在他的下面,到那时这个时候你为了解决margin塌陷你就加了一个position: absolute;,就不合适。有时候咱不想让他变成inline-block,咱想让他独占一行,也不行。这时候那个方法对你的需求没影响,你就选择使用那个方法。