首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 860
收藏 0 赞 0 分享

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

大概就是上面这个样子，下面介绍几种实现的方式。
 
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

更多精彩内容其他人还在看

CSS伪类对象before和after的用法实例详解

这两个伪类对象只有在清楚浮动clearfix的时候会用到哈，最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量并且能整出很巴适的效果
收藏 0 赞 0 分享

CSS3 实用技巧：实现黑白图像效果示例代码

本文为大家详细介绍下CSS3实现黑白图像效果的具体思路及代码，感兴趣的朋友可以看下截图，希望对大家有所帮助
收藏 0 赞 0 分享

IE.JS解决IE兼容性问题方法汇总

正如标题所言它修复了许多的HTML和CSS问题，并使得透明PNG在IE5、IE6下正确显示，下面为大家介绍下具体针对不同浏览器的调用方法，感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

实现CSS3中的border-radius(边框圆角)示例代码

本文为大家详细介绍下如何实现CSS3中的border-radius(圆角)，具体代码如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助
收藏 0 赞 0 分享

CSS line-height行高上下居中垂直居中样式属性

我们在css编写中需要对大篇幅的内容显示的更好看，有些间隔，不要在挤在一起难看，就可以使用Line-Height属性进行控制
收藏 0 赞 0 分享

CSS Float布局过程与老生常谈的三栏布局

这篇文章就是总结一下怎样使用CSS中的float属性进行布局，其实网上有很多讨论这个话题的文章了，但我觉得都没说到点子上。那就来老生常谈一次吧，CSS之Float布局
收藏 0 赞 0 分享

邮箱css加载失败怎么办 网站css加载异常原因分析

造成css加载失败的原因有很多，脚本之家也遇到过，这可能跟你代码出错，浏览器、路径、编码等等都是有关联的。所以在具体情况具体分析。下面看看具体的方案
收藏 0 赞 0 分享

CSS控制样式的三种方式(优先级对比验证)

大家都知道，CSS的中文名叫做层叠样式表，而CSS在控制样式的时候，有三种引入方式,这里简单介绍下CSS控制样式的三种方式
收藏 0 赞 0 分享

meta http-equiv="X-UA-Compatible" content="IE=7" 意思是将IE8用IE7进行渲染

X-UA-Compatible是针对ie8新加的一个设置，对于ie8之外的浏览器是不识别的，这个区别与content=
收藏 0 赞 0 分享

Discuz7.2 IE9兼容性写法 杜工完全修补方案

因为Discuz7.2在IE9浏览器中有一系列的问题，所有要在以后的开发中考虑到ie9浏览器的一些问题了，这里简单介绍下，需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22