HTML中快速实现div盒子有间隙并排三个小方法

div盒子并排显示在各大网页中是很寻常的页面效果，但是实现这种效果的方法确不止一种

方法一：使用float

	.father{
        width: 660px;
        height: 150px;
        margin: 0 auto;
        border: 2px solid red;
        overflow: hidden;
    }
    .son{
        width: 150px;
        height: 150px;
        float: left;
        text-align: center;
        line-height: 150px;
        margin-right: 20px;
    }
    .last{
        margin-right: 0;
    }

<div class="father">
        <div class="son" style="background-color: pink;">son1</div>
        <div class="son" style="background-color: rebeccapurple;">son2</div>
        <div class="son" style="background-color: sandybrown;">son3</div>
        <div class="son last" style="background-color: slategrey;">son4</div>
    </div>

原本的浮动之后再设置外边距，外层盒子的宽度会不够导致最后一个盒子在第二排显示
为什么不显示？
原因：父元素：660px < 150px4 + 20px4 = 680px
因此还需要再重新定义最后一个盒子的右外边距为0

方法二：使用 display：inline-block

	.father{
        width: 660px;
        height: 150px;
        margin: 0 auto;
        border: 2px solid red;
        font-size: 0;
    }
    .son{
        width: 150px;
        height: 150px;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        text-align: center;
        line-height: 150px;
        margin-right: 20px;
        font-size: 14px;
    }
    .last{
        margin-right: 0;
    }

<div class="father">
        <div class="son" style="background-color: pink;">son1</div>
        <div class="son" style="background-color: rebeccapurple;">son2</div>
        <div class="son" style="background-color: sandybrown;">son3</div>
        <div class="son last" style="background-color: slategrey;">son4</div>
    </div>

但是使用 display：inline-block会出现一些情况，比如：



盒子之间出现了多余的间隙
在父元素中设置了font-size：0；消除间隙但是字体消失
在盒子中重新设置文字大小 font-size=14px
而且还需要再写一些兼容性的代码，通常用来应对低版本的IE浏览器
**display: inline;
zoom: 1;

方法三：使用margin负值

.father{
        width: 660px;
        height: 150px;
        margin: 0 auto;
        border: 2px solid red;
        font-size: 0;
    }
    .son{
        width: 150px;
        height: 150px;
        display: inline-block;
        *display: inline;
        *zoom: 1;
        text-align: center;
        line-height: 150px;
        margin-right: 20px;
        font-size: 14px;
    }
    .wraper{
        margin-right: -25px;
    }

<div class="father">
        <div class="wraper">
            <div class="son" style="background-color: pink;">son1</div>
            <div class="son" style="background-color: rebeccapurple;">son2</div>
            <div class="son" style="background-color: sandybrown;">son3</div>
            <div class="son" style="background-color: slategrey;">son4</div>
        </div>
    </div>

margin负值的处理方法就是让四个盒子的外层再套一层盒子
当然这个盒子也的包裹在最外层盒子的里面
没有给wraper设置宽度的话，它的宽度是auto，占父元素的100%，也就是960px
当给wraper设置了了margin-right：-20px，它会增加wraper的宽度，增加到980px
它要保证 width + margin -right=960

其实三种方法来说都差不多，只是不同的方法解决了不同的问题。
关于间距：
就对于最后一个盒子的右边距来说，可以用margin-right：20px和margin-right：-20px来处理
只是它们解决问题的下手方式不同，一个是消除自己，一个是增加别人。


关于并排：
一个使用float来实现让块级元素并排，虽然简单，但是浮动会造成一定的影响，我们需要手动消除这些浮动产生的影响
另一个就是用display：inline-block来让块级元素以行内块的方式显示。