站长资源网页制作

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

整理:jimmy2024/12/23浏览2
简介相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同。大概就是上面这个样子,下面介绍几种实现的方式。 1.负margin大法 设置好元素的宽度和留白占满父级的宽度,然后设置父级的margin-left为留白的负留白的宽度CSS Code复制内容到剪贴板

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

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

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

CSS Code复制内容到剪贴板
  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及以上才支持 

CSS Code复制内容到剪贴板
  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的实现,需要做兼容处理(旧盒子+新盒子) 

CSS Code复制内容到剪贴板
  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,再做相应的处理。可以后台进行处理也可以前端处理(推荐后台处理) 

CSS Code复制内容到剪贴板
  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文档,注意一下兼容性没问题了

CSS Code复制内容到剪贴板
  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