您现在的位置是：网站首页> 编程资料编程资料

css布局之负margin妙用及其他实现_CSS布局实例_CSS_网页制作_

2021-09-13 1128人已围观

简介 这篇文章主要为大家详细介绍了css布局之负margin妙用及其他实现的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

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

    1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计

      
  30.         "test1 clearfix">   
  31.             
  32. src="img/test.jpg"/>
    33.   
  33.             
  34. src="img/test.jpg"/>
    35.   
  35.             
  36. src="img/test.jpg"/>
    37.   
  37.             


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

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

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

      
  49.         "test2 clearfix">   
  50.             
  51. src="img/test.jpg"/>
    52.   
  52.             
  53. src="img/test.jpg"/>
    54.   
  54.             
  55. src="img/test.jpg"/>
    56.   
  56.            

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

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

  48. 3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子），仅为演示，没做兼容处理

      
  49.         "test3">   
  50.             
  51. src="img/test.jpg"/>
    52.   
  52.             
  53. src="img/test.jpg"/>
    54.   
  54.             
  55. src="img/test.jpg"/>
    56.   
  56.            

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

CSS Code复制内容到剪贴板
  1. "text/css">   
  2. *{   提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：CSS制作各种样式的彩虹效果_CSS教程_CSS_网页制作_

    下一篇：CSS3 渐变（Gradients）之CSS3 线性渐变 _css3_CSS_网页制作_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网