css合理布局之负margin妙用及别的完成

日期:2021-01-20 类型:科技新闻 

关键词:h5互动游戏,微信h5怎么制作,h5转盘抽奖,h5测试制作,凡科H5

坚信大伙儿在新项目的开发设计中都遇到过这样的要求,1行放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-alignmiddle;   
  8. }   
  9.   
  10. ul>li{   
  11.  floatleft;   
  12. }   
  13.   
  14. ul>li>img{   
  15.  width: 100%;   
  16. }   
  17.     
  18. .test1{   
  19. padding: 0 2%;   
  20. margin-left: ⑶.3%;   
  21. }   
  22.     
  23. .test1>li{   
  24. width: 30%;   
  25. margin-left: 3.3%;   
  26. }   
  27.   
  28. </style>   
  29.  <p>1.有关负margin的完成,因为margin是根据父级测算的,会有1定的误差,可是用于挪动端上,偏差能够忽视不计</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百分比的测算根据的元素不1样致使的,可是在挪动端上由于视窗的范畴比较有限,这个区别很小,在pc上1般应用px,因此能够忽视不计。(下面也有更多的方法)
 
2.各大网站的完成,在元素內部开展填充,应用box-sizing,必须ie8及以上才适用 

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2. *{   
  3.     margin: 0;   
  4.     padding: 0;   
  5. }   
  6. img{   
  7.     vertical-alignmiddle;   
  8. }   
  9. .test1{   
  10.     padding: 0 2%;   
  11.     margin-left: ⑶.3%;   
  12. }   
  13. ul>li{   
  14.     floatleft;   
  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.     floatnone;   
  37. }   
  38. .test4{   
  39.     width1200px;   
  40.     border1px solid red;   
  41.     margin-left: ⑶.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-alignmiddle;   
  8. }   
  9. .test1{   
  10.     padding: 0 2%;   
  11.     margin-left: ⑶.3%;   
  12. }   
  13. ul>li{   
  14.     floatleft;   
  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.     floatnone;   
  37. }   
  38. .test4{   
  39.     width1200px;   
  40.     border1px solid red;   
  41.     margin-left: ⑶.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呢,延展性盒实体模型应当是专业用来解决这类状况吧,可是又有新旧盒子实体模型之分,各访问器完成的都不太1样。因此1般状况两套盒子实体模型的特性都必须再加。(喜爱折腾就上吧,实际效果棒棒的)
 
4.classname完成
 
将必须独特解决的元素再加独立的class,再做相应的解决。能够后台管理开展解决还可以前端开发解决(强烈推荐后台管理解决) 

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2. *{   
  3.     margin: 0;   
  4.     padding: 0;   
  5. }   
  6. img{   
  7.     vertical-alignmiddle;   
  8. }   
  9. .test1{   
  10.     padding: 0 2%;   
  11.     margin-left: ⑶.3%;   
  12. }   
  13. ul>li{   
  14.     floatleft;   
  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.     floatnone;   
  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() 这些完成都沒有甚么技术性难点,大伙儿能够去查阅1下css文本文档,留意1下适配性没难题了

CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2. *{   
  3.     margin: 0;   
  4.     padding: 0;   
  5. }   
  6. img{   
  7.     vertical-alignmiddle;   
  8. }   
  9. .test1{   
  10.     padding: 0 2%;   
  11.     margin-left: ⑶.3%;   
  12. }   
  13. ul>li{   
  14.     floatleft;   
  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.     floatnone;   
  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
 
差点儿忘了也有1种状况X=2时,设定好width,左侧左波动,右侧右波动。
 
实际上X=3时,也有1种解决方法,上下元素各自上下波动,正中间元素相对父级设定肯定精准定位,垂直居中精准定位。
 
留意,因为不可以整除的缘故,不可以像box-sizing那样完善的测算,可是有效的运用在新项目上彻底没难题。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

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