前端笔试题的小结（1）

1.rem和em的区别？

2.不定宽高的div的水平垂直居中？

3.关于margin的重叠问题？

<div class="a">
  <div class="b">
    <div class="c">
    </div>
  </div>
</div>

.a{
  background:#ff0000;
}
.b{
  background:#00ff00;
  margin:10px 0;
}
.c{
  height:10px;
  margin:10px 0;
  background:#0000ff;
}

这种情况是占位30px，最上方10px无色margin部分，中间10px是c的颜色，最下方10px也是无色margin部分。

关于margin的重叠部分，推荐一篇博客：http://www.hujuntao.com/web/css/css-margin-overlap.html

为了出现5个色带的情况，需要更改css代码，消除margin重叠的问题，更改如下：

    .a{
      overflow: hidden;
      background: #ff0000;
    }
    .b{
      overflow: hidden;
      background: #00ff00;
      margin:10px 0;
    }
    .c{
      height:10px;
      margin:10px 0;
      background: #0000ff;
    }