开心学习
当前位置：Web前端 > > 正文

css中的margin属性（css布局之负margin妙用及其他实现）

时间：2022-01-18 01:54:04类别：Web前端

css中的margin属性

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

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

css中的margin属性（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" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    32.             <li><img src="img/test.jpg" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    33.             <li><img src="img/test.jpg" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></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" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    51.             <li><img src="img/test.jpg" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    52.             <li><img src="img/test.jpg" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></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" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    51.             <li><img src="img/test.jpg" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    52.             <li><img src="img/test.jpg" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></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" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    62.             <li><img src="img/test.jpg" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    63.             <li><img src="img/test.jpg" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></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" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    62.             <li><img src="img/test.jpg" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    63.             <li><img src="img/test.jpg" alt="css中的margin属性（css布局之负margin妙用及其他实现）" border="0" />/></li>   
    64.         </ul>   

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

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

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

    标签：
    margin 布局 css
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习