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

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

大概就是上面这个样子，下面介绍几种实现的方式。
 
1.负margin大法
 
设置好元素的宽度和留白占满父级的宽度，然后设置父级的margin-left为留白的负留白的宽度

1. <style type="text/css">    
2. *{   
3.  margin: 0;   
4.  padding: 0;   
5. }   
6. img{   
7.  vertical-align: middle;   
8. }   
9.   
10. ul>li{   
11.  float: left;   
12. }   
13.   
14. ul>li>img{   
15.  width: 100%;   
16. }   
17.     
18. .test1{   
19. padding: 0 2%;   
20. margin-left: -3.3%;   
21. }   
22.     
23. .test1>li{   
24. width: 30%;   
25. margin-left: 3.3%;   
26. }   
27.   
28. </style>   
29.  <p>1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计</p>   
30.         <ul class="test1 clearfix">   
31.             <li><img src="img/test.jpg"/></li>   
32.             <li><img src="img/test.jpg"/></li>   
33.             <li><img src="img/test.jpg"/></li>   
34.         </ul>    

上面的误差是因为ul的margin和li的margin百分比的计算基于的元素不一样导致的，但是在移动端上因为视窗的范围有限，这个差别很小，在pc上一般使用px，所以可以忽略不计。（下面还有更多的办法）
 
2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持 

1. <style type="text/css">   
2. *{   
3.     margin: 0;   
4.     padding: 0;   
5. }   
6. img{   
7.     vertical-align: middle;   
8. }   
9. .test1{   
10.     padding: 0 2%;   
11.     margin-left: -3.3%;   
12. }   
13. ul>li{   
14.     float: left;   
15. }   
16. .test1>li{   
17.     width: 30%;   
18.     margin-left: 3.3%;   
19. }   
20. ul>li>img{   
21.     width: 100%;   
22. }   
23. .test2>li{   
24.     width: 33.3%;   
25.     padding: 0 2%;   
26.     box-sizing: border-box;   
27. }   
28. .test3{   
29.     display: flex;   
30.     justify-content: space-between;   
31.        
32. }   
33. .test3>li{   
34.     width: 31.3%;   
35.     padding: 0 2%;   
36.     float: none;   
37. }   
38. .test4{   
39.     width: 1200px;   
40.     border: 1px solid red;   
41.     margin-left: -3.33%;   
42. }   
43. .test4>li{   
44.     width: 30%;   
45.     margin-left: 3.33%;   
46. }   
47. </style>   
48. <p>2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持</p>   
49.         <ul class="test2 clearfix">   
50.             <li><img src="img/test.jpg"/></li>   
51.             <li><img src="img/test.jpg"/></li>   
52.             <li><img src="img/test.jpg"/></li>   
53.         </ul>   

这种实现暂时还没发现什么缺点，代码也简单易懂（推荐）
 
3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子） 

1. <style type="text/css">   
2. *{   
3.     margin: 0;   
4.     padding: 0;   
5. }   
6. img{   
7.     vertical-align: middle;   
8. }   
9. .test1{   
10.     padding: 0 2%;   
11.     margin-left: -3.3%;   
12. }   
13. ul>li{   
14.     float: left;   
15. }   
16. .test1>li{   
17.     width: 30%;   
18.     margin-left: 3.3%;   
19. }   
20. ul>li>img{   
21.     width: 100%;   
22. }   
23. .test2>li{   
24.     width: 33.3%;   
25.     padding: 0 2%;   
26.     box-sizing: border-box;   
27. }   
28. .test3{   
29.     display: flex;   
30.     justify-content: space-between;   
31.        
32. }   
33. .test3>li{   
34.     width: 31.3%;   
35.     padding: 0 2%;   
36.     float: none;   
37. }   
38. .test4{   
39.     width: 1200px;   
40.     border: 1px solid red;   
41.     margin-left: -3.33%;   
42. }   
43. .test4>li{   
44.     width: 30%;   
45.     margin-left: 3.33%;   
46. }   
47. </style>   
48. <p>3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子），仅为演示，没做兼容处理</p>   
49.         <ul class="test3">   
50.             <li><img src="img/test.jpg"/></li>   
51.             <li><img src="img/test.jpg"/></li>   
52.             <li><img src="img/test.jpg"/></li>   
53.         </ul>   

这种情况怎么能少了我们flex呢，弹性盒模型应该是专门用来处理这种情况吧，但是又有新旧盒子模型之分，各浏览器实现的都不太一样。所以一般情况两套盒子模型的属性都需要加上。（喜欢折腾就上吧，效果棒棒的）
 
4.classname实现
 
将需要特殊处理的元素加上单独的class，再做相应的处理。可以后台进行处理也可以前端处理（推荐后台处理） 

1. <style type="text/css">   
2. *{   
3.     margin: 0;   
4.     padding: 0;   
5. }   
6. img{   
7.     vertical-align: middle;   
8. }   
9. .test1{   
10.     padding: 0 2%;   
11.     margin-left: -3.3%;   
12. }   
13. ul>li{   
14.     float: left;   
15. }   
16. .test1>li{   
17.     width: 30%;   
18.     margin-left: 3.3%;   
19. }   
20. ul>li>img{   
21.     width: 100%;   
22. }   
23. .test2>li{   
24.     width: 33.3%;   
25.     padding: 0 2%;   
26.     box-sizing: border-box;   
27. }   
28. .test3{   
29.     display: flex;   
30.     justify-content: space-between;   
31.        
32. }   
33. .test3>li{   
34.     width: 31.3%;   
35.     padding: 0 2%;   
36.     float: none;   
37. }   
38. .test4{   
39.     padding: 0 2%;   
40. }   
41. .test4>li{   
42.     width: 30%;   
43.     margin-left: 5%;   
44. }   
45. .test4>li.first{   
46.     margin: 0;   
47. }   
48. .test5{   
49.     padding: 0 2%;   
50. }   
51. .test5>li{   
52.     width: 30%;   
53.     margin-left: 5%;   
54. }   
55. .test5>li:first-child{   
56.     margin: 0;   
57. }   
58. </style>   
59. <p>4.classname实现</p>   
60.         <ul class="test4 clearfix">   
61.             <li class="first"><img src="img/test.jpg"/></li>   
62.             <li><img src="img/test.jpg"/></li>   
63.             <li><img src="img/test.jpg"/></li>   
64.         </ul>   

5.css选择器实现
 
:first-child :first-type-of :nth-child() 这些实现都没有什么技术难点，大家可以去查阅一下css文档，注意一下兼容性没问题了

1. <style type="text/css">   
2. *{   
3.     margin: 0;   
4.     padding: 0;   
5. }   
6. img{   
7.     vertical-align: middle;   
8. }   
9. .test1{   
10.     padding: 0 2%;   
11.     margin-left: -3.3%;   
12. }   
13. ul>li{   
14.     float: left;   
15. }   
16. .test1>li{   
17.     width: 30%;   
18.     margin-left: 3.3%;   
19. }   
20. ul>li>img{   
21.     width: 100%;   
22. }   
23. .test2>li{   
24.     width: 33.3%;   
25.     padding: 0 2%;   
26.     box-sizing: border-box;   
27. }   
28. .test3{   
29.     display: flex;   
30.     justify-content: space-between;   
31.        
32. }   
33. .test3>li{   
34.     width: 31.3%;   
35.     padding: 0 2%;   
36.     float: none;   
37. }   
38. .test4{   
39.     padding: 0 2%;   
40. }   
41. .test4>li{   
42.     width: 30%;   
43.     margin-left: 5%;   
44. }   
45. .test4>li.first{   
46.     margin: 0;   
47. }   
48. .test5{   
49.     padding: 0 2%;   
50. }   
51. .test5>li{   
52.     width: 30%;   
53.     margin-left: 5%;   
54. }   
55. .test5>li:first-child{   
56.     margin: 0;   
57. }   
58. </style>   
59. <p>5.css选择器实现(注意ie兼容性)</p>   
60.         <ul class="test5 clearfix">   
61.             <li><img src="img/test.jpg"/></li>   
62.             <li><img src="img/test.jpg"/></li>   
63.             <li><img src="img/test.jpg"/></li>   
64.         </ul>   

贴上全部的DEMO
 
差点忘了还有一种情况X=2时，设置好width，左边左浮动，右边右浮动。
 
其实X=3时，还有一种处理方式，左右元素分别左右浮动，中间元素相对于父级设置绝对定位，居中定位。
 
注意，由于不能整除的原因，不能像box-sizing那样完美的计算，但是合理的应用在项目上完全没问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

原文地址：http://www.cnblogs.com/jesse007/p/5650236.html