网页中的经典bug(1)——margin塌陷

我先跟大家说一个我亲身经历的事情，在我们刚学HTML的时候，我的一个同学问我问题，为什么他调小盒子的位置，大盒子和小盒子一起动。我就看了看他的代码，发现他定位用的全是margin。我们知道，网页中的定位大用的都是position，他居然用margin，我当时就笑了，然后告诉他margin会有塌陷与合并问题，他这种定位的方法完全是不对的。那么，究竟什么是margin塌陷，什么又是margin合并呢？下面，我们就来学习一下：

我们先看一下代码：

红色的大盒子是父级，绿色的小盒子是子级。

我们给父级加了一个margin-top: 100px;这样按理论来说也是正确的。然后不正常地开始了：

我们只给子元素加了margin，按理说应该是绿色的盒子向下移动，而红色的盒子不动才对，可是我们看结果发现并不是这样，结果是红色盒子和绿色盒子一起向下移动了，还有我们再来看下一张图：

我们同时给两个盒子添加不同值的margin，结果是两个盒子还是没有分开，两个盒子距离顶部的距离为最大的值300px，这个就是因为触发了经典bug——margin塌陷。

margin塌陷：父级嵌套子元素垂直方向的margin，父子元素是结合在一起的，他们两个会取其中最大的值，正常情况下，父级是相对于浏览器定位的，子元素是相对于父元素定位的，但是margin塌陷是在父级相对于浏览器定位时，子级没有相对于父级定位，就像父级的棚子没有了一样，子级相对于父级，就像塌陷了一样。

好了，今天就到这里了，我们下次讲讲margin的另一个经典bug。