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. }
  9. ul>li{
  10. float:left;
  11. }
  12. ul>li>img{
  13. width:100%;
  14. }
  15. .test1{
  16. padding:02%;
  17. margin-left:-3.3%;
  18. }
  19. .test1>li{
  20. width:30%;
  21. margin-left:3.3%;
  22. }
  23. </style>
  24. <p>1.关于负margin的实现,由于margin是基于父级计算的,会有一定的偏差,但是用于移动端上,误差可以忽略不计</p>
  25. <ulclass="test1clearfix">
  26. <li><imgsrc="img/test.jpg"/></li>
  27. <li><imgsrc="img/test.jpg"/></li>
  28. <li><imgsrc="img/test.jpg"/></li>
  29. </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;
  31. }
  32. .test3>li{
  33. width:31.3%;
  34. padding:02%;
  35. float:none;
  36. }
  37. .test4{
  38. width:1200px;
  39. border:1pxsolidred;
  40. margin-left:-3.33%;
  41. }
  42. .test4>li{
  43. width:30%;
  44. margin-left:3.33%;
  45. }
  46. </style>
  47. <p>2.各大网站的实现,在元素内部进行填充,使用box-sizing,需要ie8及以上才支持</p>
  48. <ulclass="test2clearfix">
  49. <li><imgsrc="img/test.jpg"/></li>
  50. <li><imgsrc="img/test.jpg"/></li>
  51. <li><imgsrc="img/test.jpg"/></li>
  52. </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;
  31. }
  32. .test3>li{
  33. width:31.3%;
  34. padding:02%;
  35. float:none;
  36. }
  37. .test4{
  38. width:1200px;
  39. border:1pxsolidred;
  40. margin-left:-3.33%;
  41. }
  42. .test4>li{
  43. width:30%;
  44. margin-left:3.33%;
  45. }
  46. </style>
  47. <p>3.弹性盒模型flex的实现,需要做兼容处理(旧盒子+新盒子),仅为演示,没做兼容处理</p>
  48. <ulclass="test3">
  49. <li><imgsrc="img/test.jpg"/></li>
  50. <li><imgsrc="img/test.jpg"/></li>
  51. <li><imgsrc="img/test.jpg"/></li>
  52. </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;
  31. }
  32. .test3>li{
  33. width:31.3%;
  34. padding:02%;
  35. float:none;
  36. }
  37. .test4{
  38. padding:02%;
  39. }
  40. .test4>li{
  41. width:30%;
  42. margin-left:5%;
  43. }
  44. .test4>li.first{
  45. margin:0;
  46. }
  47. .test5{
  48. padding:02%;
  49. }
  50. .test5>li{
  51. width:30%;
  52. margin-left:5%;
  53. }
  54. .test5>li:first-child{
  55. margin:0;
  56. }
  57. </style>
  58. <p>4.classname实现</p>
  59. <ulclass="test4clearfix">
  60. <liclass="first"><imgsrc="img/test.jpg"/></li>
  61. <li><imgsrc="img/test.jpg"/></li>
  62. <li><imgsrc="img/test.jpg"/></li>
  63. </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;
  31. }
  32. .test3>li{
  33. width:31.3%;
  34. padding:02%;
  35. float:none;
  36. }
  37. .test4{
  38. padding:02%;
  39. }
  40. .test4>li{
  41. width:30%;
  42. margin-left:5%;
  43. }
  44. .test4>li.first{
  45. margin:0;
  46. }
  47. .test5{
  48. padding:02%;
  49. }
  50. .test5>li{
  51. width:30%;
  52. margin-left:5%;
  53. }
  54. .test5>li:first-child{
  55. margin:0;
  56. }
  57. </style>
  58. <p>5.css选择器实现(注意ie兼容性)</p>
  59. <ulclass="test5clearfix">
  60. <li><imgsrc="img/test.jpg"/></li>
  61. <li><imgsrc="img/test.jpg"/></li>
  62. <li><imgsrc="img/test.jpg"/></li>
  63. </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打字动画的如何实现示例