盒子模型中的主要三个概念： - 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
外边距合并概念: 相邻的两个或者多个外边距在垂直方向上合并成一个外边距，这就是所谓的外边距合并。 水平方向不存在此现象。 外边距合并产生条件: （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。
