前端面试实战：布局与算法-CSDN博客

和面试官上个礼拜约的时间，但是面试前一天突然接到金山的终面邀请，因此一天需要去两场面试，中午抽午休时间去金山参加了终面，然后大气没怎么喘，晚上下了班就直奔高德，开始真的不想去了，但是爽约是很不好的行为，于是硬着头皮去了高德。
由于两场面试都是占用的吃饭时间，所以基本一天没吃饭，路上买了俩包子随便垫吧了两口。我们公司离望京还比较远，本来约好的七点面试，等我到了七点半了已经，然后等于了一会儿来了一个比较严肃的面试官，本来白天的面试加上没怎么吃饭就整个人有点懵，然后气氛一紧张，我菊花一紧。。。
这次面试我没抱什么希望，因为招的是高级前端工程师，然后又是阿里的，所以难度还是不小，好了，上干货！
面试题：
1.两个div，上面div的margin-bottom为20px，下面div的margin-top为40px，下面div里还有一个div，里面div的margin-top为15px，最终渲染出来是什么样的？
这道题住哟考察了两个知识点：
(1).上下margin的重叠
(2) 子节点margin-top溢出
先说(1)，我们知道，两个块级元素，上面元素的margin-bottom和下面元素的margin-top是会重叠的，间距取两者最大值，看下面例子：

<html>
<head>
</head>

<body>
  <div style="background-color: green; overflow: hidden;">
    <p style="background-color: red; margin: 100px 0 100px 0;">1</p>
    <p style="background-color: red; margin: 100px 0 0 0;">
        <p style="background-color: yellow; margin: 0 0 0 0;">2</p>
    </p>
  </div>
</body>