盒模型和边距重叠

盒模型计算

盒模型的组成从里到外为content内容，padding内边距，border边框，margin外边距

盒模型有两种模型，一种是标准模型，一种是IE模型。

标准模型的width和height只是content内容的宽or高，不包含padding和border

IE模型的width和height为content的宽or高 + padding + border的总和

Css可以用box-sizing设置盒模型的类型

/* 标准模型 */width到content的边界

box-sizing:content-box;

 /*IE模型*/width到border的边界

box-sizing:border-box;

假如有一个宽度为400px，padding为20px，border为1px的div

<style>
div{
     width:400px;
     padding:20px;
     border:1px solid red;
     background:#f7e1b5;
     /*box-sizing: border-box;*/
}       
</style>
<div>
    111
</div>    

在标准模式下，400px是div内容的宽度，在页面布局时这个div最后会占据的宽度是442px。

在IE模式下，400px是div内容的宽度+padding+border的总和，在页面布局时这个div最后会占据的宽度就是400px。

而此时div内容的宽度=400px - 40px（padding） - 2px（border），只剩下358px。

边距重叠

兄弟重叠

在标准文档流中给兄弟元素都设置了margin时，

水平方向上不会出现问题，兄弟元素的margin会进行相加，

而垂直方向上兄弟元素的margin不会直接进行相加，而是会出现边距重叠。

如果两者都为正外边距以最大的外边距为准，

即一个margin-bottom:50px，一个margin-top:80px，最后两兄弟之间的距离是80px

如果存在负边距， 合并后的外边距为最大正外边距减去绝对值最大的负边距，

即一个margin-bottom:-50px，一个margin-top:80px，最后两兄弟之间的距离是30px

如果两个都是负外边距，则用0减去绝对值最大负边距，

即一个margin-bottom:-50px，一个margin-top:-80px，最后两兄弟之间的距离是-80px

因此在布局时，垂直方向上的距离只给兄弟元素中的一个设置margin-top或者margin-bottom即可。

需要注意如果给兄弟元素设置了float属性以后，元素会脱离文档流，此时兄弟元素的margin都会生效，不会发生边距重叠。

父子重叠

在标准文档流中父子元素也会存在边距重叠，子元素设置margin-top，父元素没有设置margin也会跟着往下走。

如

 <style>
   .father{
        width:400px;
        height:200px;
        background: #f7e1b5;
   }
   .son{
        margin-top:50px;
        width:200px;
        height:200px;
        background: #d0e9c6;
   }
</style>
<div class="father">
    <div class="son">
        222
    </div>
</div>

显示出来是这样的

解决这个问题的方法有

1、给父元素加border，但是因为这个给父元素加border会影响美观，可能会导致1px无法对齐这种问题。

2、布局时如果需要在父元素和子元素直接留出一段距离，可以用父元素padding来代替子元素的margin。

3、给父元素设置overflow:hidden/auto，使之包裹子元素。

4、给父元素设置float:left/right，但是会使父元素跳出文档流，打乱页面布局，如果只是为了撑开父子元素之间的距离不建议用这个解决方案

5、给父元素设置position:absolute，产生的问题和float一样。

所以比较常用的还是用父元素padding来代替子元素的margin，或者用overflow包裹。