什么是边距重叠，边距重叠的结果是什么？

1. 什么是边距重叠

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局是，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

2. 边距重叠的几种情况

1.     两个元素为兄弟关系
这种情况如果两元素同行显示则不会产生重叠，垂直排列着产生重叠。

2.     父子（包含）关系
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

3.     自身边距重叠

定义一个含外边距元素（无边框），内容为空，此时上下边距就会产生重叠。

3. 消除边距重叠的方式

上面我们写了几个div，宽度为设置，body为灰色部分，width: 640px，页面中其他元素均无边距。

1. 设置display: inline-block;

设置display: inline-block可以消除上面三种边距重叠:
a. 图中 body 与 .div1 .div3 产生边距折叠，导致body不能对其页面顶部，这个方法比较常用。
b. .div1 .div2 .div3 之间产生的边距折叠

2. 设置绝对定位

1.     可以看到，三种边距分别体现了出现，

2.     这种方式对没有内容的元素没有作用；

3.     设置overflow: visible;以外的overflow属性

上图中我们对父元素设置了overflow: hidden,结果发现效果和设置display:inline-block

5. 其他方法

a. 内层元素 加float:left;
b. 外层元素用padding增加边距;
c. 内层元素透明边框 border:1px solid transparent;
d. 以及其他尚不明确的方法。。。

4. 参考文献

http://www.hujuntao.com/web/css/css-margin-overlap.html" :CSS 外边距(margin)重叠及防止方法
href="http://developer.51cto.com/art/201008/221940_all.htm" : CSS中margin边界叠加问题及解决方案
http://www.jianshu.com/p/265fb9f0de97 :CSS2 速查表 - BFC与边距重叠详解

今天完成的事情：小课堂分享、小项目静态页面

收获：

理解组件化思想，之前并没有在这方面过多研究，真的开始执行了发现没那么简单，现在我的方式是常用的属性写成一个类，以此避免了css中重复属性的书写，减少代码沉余，查了一下这种无意中用到的方式叫原子类，是把双刃剑，不过好像都说弊大于利，汗；

想设置一个主less文件，然后通过@import引入多个组建部分less文件；然后不知道为什么一直报错，koala无限崩，只好先用css写了各个模块部分，也就有了后来无意中用原子类的方法；

问题：模块化思想还是要深入理解，并不是为了模块而各种拆，而是要考虑怎么写才能方便维护，方便更改；

明天计划的事情：尽快完成各页面然后早点结束任务4