css布局之负margin妙用及其余实现

相信你们在项目的开发中都遇到过这样的需求，一行放X（X>1）个块且相邻块之间的间距相同。

大概就是上面这个样子，下面介绍几种实现的方式。

1.负margin大法

设置好元素的宽度和留白占满父级的宽度，而后设置父级的margin-left为留白的负留白的宽度

<style type="text/css">

*{
margin: 0;
padding: 0;
}
img{
vertical-align: middle;
}

ul>li{
float: left;
}

ul>li>img{
width: 100%;
}

.test1{
padding: 0 2%;
margin-left: -3.3%;
}

.test1>li{
width: 30%;
margin-left: 3.3%;
}

</style>

<p>1.关于负margin的实现，因为margin是基于父级计算的，会有必定的误差，可是用于移动端上，偏差能够忽略不计</p>
        <ul class="test1 clearfix">
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
        </ul>

上面的偏差是由于ul的margin和li的margin百分比的计算基于的元素不同致使的，可是在移动端上由于视窗的范围有限，这个差异很小，在pc上通常使用px，因此能够忽略不计。（下面还有更多的办法）

2.各大网站的实现，在元素内部进行填充,使用box-sizing，须要ie8及以上才支持

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
}
.test1{
    padding: 0 2%;
    margin-left: -3.3%;
}
ul>li{
    float: left;
}
.test1>li{
    width: 30%;
    margin-left: 3.3%;
}
ul>li>img{
    width: 100%;
}
.test2>li{
    width: 33.3%;
    padding: 0 2%;
    box-sizing: border-box;
}
.test3{
    display: flex;
    justify-content: space-between;
    
}
.test3>li{
    width: 31.3%;
    padding: 0 2%;
    float: none;
}
.test4{
    width: 1200px;
    border: 1px solid red;
    margin-left: -3.33%;
}
.test4>li{
    width: 30%;
    margin-left: 3.33%;
}
</style>
<p>2.各大网站的实现，在元素内部进行填充,使用box-sizing，须要ie8及以上才支持</p>
        <ul class="test2 clearfix">
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
        </ul>

这种实现暂时还没发现什么缺点，代码也简单易懂（推荐）

3.弹性盒模型flex的实现，须要作兼容处理（旧盒子+新盒子）

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
}
.test1{
    padding: 0 2%;
    margin-left: -3.3%;
}
ul>li{
    float: left;
}
.test1>li{
    width: 30%;
    margin-left: 3.3%;
}
ul>li>img{
    width: 100%;
}
.test2>li{
    width: 33.3%;
    padding: 0 2%;
    box-sizing: border-box;
}
.test3{
    display: flex;
    justify-content: space-between;
    
}
.test3>li{
    width: 31.3%;
    padding: 0 2%;
    float: none;
}
.test4{
    width: 1200px;
    border: 1px solid red;
    margin-left: -3.33%;
}
.test4>li{
    width: 30%;
    margin-left: 3.33%;
}
</style>
<p>3.弹性盒模型flex的实现，须要作兼容处理（旧盒子+新盒子），仅为演示，没作兼容处理</p>
        <ul class="test3">
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
        </ul>

这种状况怎么能少了咱们flex呢，弹性盒模型应该是专门用来处理这种状况吧，可是又有新旧盒子模型之分，各浏览器实现的都不太同样。因此通常状况两套盒子模型的属性都须要加上。（喜欢折腾就上吧，效果棒棒的）

4.classname实现

将须要特殊处理的元素加上单独的class，再作相应的处理。能够后台进行处理也能够前端处理（推荐后台处理）

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
}
.test1{
    padding: 0 2%;
    margin-left: -3.3%;
}
ul>li{
    float: left;
}
.test1>li{
    width: 30%;
    margin-left: 3.3%;
}
ul>li>img{
    width: 100%;
}
.test2>li{
    width: 33.3%;
    padding: 0 2%;
    box-sizing: border-box;
}
.test3{
    display: flex;
    justify-content: space-between;
    
}
.test3>li{
    width: 31.3%;
    padding: 0 2%;
    float: none;
}
.test4{
    padding: 0 2%;
}
.test4>li{
    width: 30%;
    margin-left: 5%;
}
.test4>li.first{
    margin: 0;
}
.test5{
    padding: 0 2%;
}
.test5>li{
    width: 30%;
    margin-left: 5%;
}
.test5>li:first-child{
    margin: 0;
}
</style>
<p>4.classname实现</p>
        <ul class="test4 clearfix">
            <li class="first"><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
        </ul>

5.css选择器实现

:first-child :first-type-of :nth-child() 这些实现都没有什么技术难点，你们能够去查阅一下css文档，注意一下兼容性没问题了

<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
img{
    vertical-align: middle;
}
.test1{
    padding: 0 2%;
    margin-left: -3.3%;
}
ul>li{
    float: left;
}
.test1>li{
    width: 30%;
    margin-left: 3.3%;
}
ul>li>img{
    width: 100%;
}
.test2>li{
    width: 33.3%;
    padding: 0 2%;
    box-sizing: border-box;
}
.test3{
    display: flex;
    justify-content: space-between;
    
}
.test3>li{
    width: 31.3%;
    padding: 0 2%;
    float: none;
}
.test4{
    padding: 0 2%;
}
.test4>li{
    width: 30%;
    margin-left: 5%;
}
.test4>li.first{
    margin: 0;
}
.test5{
    padding: 0 2%;
}
.test5>li{
    width: 30%;
    margin-left: 5%;
}
.test5>li:first-child{
    margin: 0;
}
</style>
<p>5.css选择器实现(注意ie兼容性)</p>
        <ul class="test5 clearfix">
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
            <li><img src="img/test.jpg"/></li>
        </ul>

贴上所有的DEMO

差点忘了还有一种状况X=2时，设置好width，左边左浮动，右边右浮动。

其实X=3时，还有一种处理方式，左右元素分别左右浮动，中间元素相对于父级设置绝对定位，居中定位。

注意，因为不能整除的缘由，不能像box-sizing那样完美的计算，可是合理的应用在项目上彻底没问题。

我的思路毕竟有限，若是你们还有什么其余方案，欢迎留言。