margin、position及padding的理解

盒子模型中的主要三个概念：
- margin:主要是指该元素与相邻元素之间的距离
- padding：主要是指元素内容与块级元素设置边框之间的距离，这里不包含边框的宽度
- position：主要分relative/absolute，根据父级元素设置相应的位置

margin/padding的顺序是顺时针：top-right-bottom-left
如果只写两个数值，代表：top-left
默认情况下，如果top跟bottom属性冲突，则取top值
left和right属性冲突，则取right

这里有个width和height属性的设置问题，这两个属性设置的是该元素原始的宽高，就是去除其他属性设置的值（例如：padding,border）

margin-top是相对定位，position中的top只有在absolute的情况下才有效，是绝对定位

值一样的情况下，top会比margin-top多9px，因为body正常情况下与html之间的距离9px，这意味着使用margin-top是相对html标签，而top是相对body

关于margin外边距合并的理解

外边距合并概念:
相邻的两个或者多个外边距在垂直方向上合并成一个外边距，这就是所谓的外边距合并。
水平方向不存在此现象。
外边距合并产生条件:
（1）.相邻的外边距之间没有非空内容、padding或者border。
（2）.元素都处于文档流中，即非浮动和position属性值不为absolute和fixed的元素。
特别说明:如果是元素是父子关系，子元素的padding和border并不能够消除合并现象。
合并可以存在于兄弟对象之间，也可以存在于父子对象之间

上外边距合并出现的条件:
1.父元素的上边距与子元素的上边距之间没有border。
2.父元素的上边距与子元素的上边距之间没有非空内容。
3.父元素的上边距与子元素的上边距之间没有padding。
3.父元素和子元素中没有设置定位属性（除static和relative）、overflow（除visible）和display:inline-block等。
4.父元素或者资源都没有浮动。
注意:以上条件必须都要满足才可以。那么解决此中情况的方式也很简单，只要破坏上面的一种情况就可以了。

<div style="margin-top:50px; background-color:yellow;">   <div style="margin-top:-50px;">     <div style="margin-top:150px;">蚂蚁部落</div>   </div> </div> 

在以上代码中，三个外边距出现合并现象。需要特别注意的是，计算合并后外边距值的方式并非是一层一层计算的，而是遵循的是从负值值挑选最小的和从正值挑选的最大的相加，也就是-50px+150px=100px。