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

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

1.负margin大法

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

CSS Code复制内容到剪贴板

<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及以上才支持

CSS Code复制内容到剪贴板

<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的实现，需要做兼容处理（旧盒子+新盒子）

CSS Code复制内容到剪贴板

<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，再做相应的处理。可以后台进行处理也可以前端处理（推荐后台处理）

CSS Code复制内容到剪贴板

<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文档，注意一下兼容性没问题了

CSS Code复制内容到剪贴板

<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那样完美的计算，但是合理的应用在项目上完全没问题。