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

网络
我赞美你品格高尚，崇敬你洁白无瑕。我爱你、想你、盼你，像对每一个季节那样。我爱你、想你、盼你，不管世俗的偏见怎样厉害。冬――四季之一的冬，你来吧！我喜欢你纯净的身躯，喜欢你严厉的性格，我要在你的怀抱中锻炼、奋斗、成熟……你可以和春天的万花，夏天的麦浪，秋天的瓜果……比美！

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

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

1.负margin大法

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

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  6. img{
  7. vertical-align:middle;
  8. }
  10. ul>li{
  11. float:left;
  12. }
  14. ul>li>img{
  15. width:100%;
  16. }
  18. .test1{
  19. padding:02%;
  20. margin-left:-3.3%;
  21. }
  23. .test1>li{
  24. width:30%;
  25. margin-left:3.3%;
  26. }
  28. </style>
  29. <p>1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计</p>
  30. <ulclass="test1clearfix">
  31. <li><imgsrc="img/test.jpg"/></li>
  32. <li><imgsrc="img/test.jpg"/></li>
  33. <li><imgsrc="img/test.jpg"/></li>
  34. </ul>


上面的误差是因为ul的margin和li的margin百分比的计算基于的元素不一样导致的，但是在移动端上因为视窗的范围有限，这个差别很小，在pc上一般使用px，所以可以忽略不计。（下面还有更多的办法）

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

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  6. img{
  7. vertical-align:middle;
  8. }
  9. .test1{
  10. padding:02%;
  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:02%;
  26. box-sizing:border-box;
  27. }
  28. .test3{
  29. display:flex;
  30. justify-content:space-between;
  32. }
  33. .test3>li{
  34. width:31.3%;
  35. padding:02%;
  36. float:none;
  37. }
  38. .test4{
  39. width:1200px;
  40. border:1pxsolidred;
  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. <ulclass="test2clearfix">
  50. <li><imgsrc="img/test.jpg"/></li>
  51. <li><imgsrc="img/test.jpg"/></li>
  52. <li><imgsrc="img/test.jpg"/></li>
  53. </ul>

这种实现暂时还没发现什么缺点，代码也简单易懂（推荐）

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

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  6. img{
  7. vertical-align:middle;
  8. }
  9. .test1{
  10. padding:02%;
  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:02%;
  26. box-sizing:border-box;
  27. }
  28. .test3{
  29. display:flex;
  30. justify-content:space-between;
  32. }
  33. .test3>li{
  34. width:31.3%;
  35. padding:02%;
  36. float:none;
  37. }
  38. .test4{
  39. width:1200px;
  40. border:1pxsolidred;
  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. <ulclass="test3">
  50. <li><imgsrc="img/test.jpg"/></li>
  51. <li><imgsrc="img/test.jpg"/></li>
  52. <li><imgsrc="img/test.jpg"/></li>
  53. </ul>

这种情况怎么能少了我们flex呢，弹性盒模型应该是专门用来处理这种情况吧，但是又有新旧盒子模型之分，各浏览器实现的都不太一样。所以一般情况两套盒子模型的属性都需要加上。（喜欢折腾就上吧，效果棒棒的）

4.classname实现

将需要特殊处理的元素加上单独的class，再做相应的处理。可以后台进行处理也可以前端处理（推荐后台处理）

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  6. img{
  7. vertical-align:middle;
  8. }
  9. .test1{
  10. padding:02%;
  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:02%;
  26. box-sizing:border-box;
  27. }
  28. .test3{
  29. display:flex;
  30. justify-content:space-between;
  32. }
  33. .test3>li{
  34. width:31.3%;
  35. padding:02%;
  36. float:none;
  37. }
  38. .test4{
  39. padding:02%;
  40. }
  41. .test4>li{
  42. width:30%;
  43. margin-left:5%;
  44. }
  45. .test4>li.first{
  46. margin:0;
  47. }
  48. .test5{
  49. padding:02%;
  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. <ulclass="test4clearfix">
  61. <liclass="first"><imgsrc="img/test.jpg"/></li>
  62. <li><imgsrc="img/test.jpg"/></li>
  63. <li><imgsrc="img/test.jpg"/></li>
  64. </ul>

5.css选择器实现

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

CSS Code复制内容到剪贴板
  1. <styletype="text/css">
  2. *{
  3. margin:0;
  4. padding:0;
  5. }
  6. img{
  7. vertical-align:middle;
  8. }
  9. .test1{
  10. padding:02%;
  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:02%;
  26. box-sizing:border-box;
  27. }
  28. .test3{
  29. display:flex;
  30. justify-content:space-between;
  32. }
  33. .test3>li{
  34. width:31.3%;
  35. padding:02%;
  36. float:none;
  37. }
  38. .test4{
  39. padding:02%;
  40. }
  41. .test4>li{
  42. width:30%;
  43. margin-left:5%;
  44. }
  45. .test4>li.first{
  46. margin:0;
  47. }
  48. .test5{
  49. padding:02%;
  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. <ulclass="test5clearfix">
  61. <li><imgsrc="img/test.jpg"/></li>
  62. <li><imgsrc="img/test.jpg"/></li>
  63. <li><imgsrc="img/test.jpg"/></li>
  64. </ul>

贴上全部的DEMO

差点忘了还有一种情况X=2时，设置好width，左边左浮动，右边右浮动。

其实X=3时，还有一种处理方式，左右元素分别左右浮动，中间元素相对于父级设置绝对定位，居中定位。

注意，由于不能整除的原因，不能像box-sizing那样完美的计算，但是合理的应用在项目上完全没问题。

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

本文css布局之负margin妙用及其他如何实现到此结束。一时的挫折往往能够经过不屈的搏击，变成学问及见识。小编再次感谢大家对我们的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例