欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css布局之負(fù)margin妙用及其他實(shí)現(xiàn)

  發(fā)布時(shí)間：2016-07-07 15:48:54   作者：佚名   我要評(píng)論
這篇文章主要為大家詳細(xì)介紹了css布局之負(fù)margin妙用及其他實(shí)現(xiàn)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

相信大家在項(xiàng)目的開發(fā)中都遇到過這樣的需求，一行放X（X>1）個(gè)塊且相鄰塊之間的間距相同。

大概就是上面這個(gè)樣子，下面介紹幾種實(shí)現(xiàn)的方式。
 
1.負(fù)margin大法
 
設(shè)置好元素的寬度和留白占滿父級(jí)的寬度，然后設(shè)置父級(jí)的margin-left為留白的負(fù)留白的寬度

CSS Code復(fù)制內(nèi)容到剪貼板
  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.關(guān)于負(fù)margin的實(shí)現(xiàn)，由于margin是基于父級(jí)計(jì)算的，會(huì)有一定的偏差，但是用于移動(dòng)端上，誤差可以忽略不計(jì)</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>    


上面的誤差是因?yàn)閡l的margin和li的margin百分比的計(jì)算基于的元素不一樣導(dǎo)致的，但是在移動(dòng)端上因?yàn)橐暣暗姆秶邢?，這個(gè)差別很小，在pc上一般使用px，所以可以忽略不計(jì)。（下面還有更多的辦法）
 
2.各大網(wǎng)站的實(shí)現(xiàn)，在元素內(nèi)部進(jìn)行填充,使用box-sizing，需要ie8及以上才支持 

CSS Code復(fù)制內(nèi)容到剪貼板
  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.各大網(wǎng)站的實(shí)現(xiàn)，在元素內(nèi)部進(jìn)行填充,使用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>   

這種實(shí)現(xiàn)暫時(shí)還沒發(fā)現(xiàn)什么缺點(diǎn)，代碼也簡單易懂（推薦）
 
3.彈性盒模型flex的實(shí)現(xiàn)，需要做兼容處理（舊盒子+新盒子） 

CSS Code復(fù)制內(nèi)容到剪貼板
  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的實(shí)現(xiàn)，需要做兼容處理（舊盒子+新盒子），僅為演示，沒做兼容處理</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呢，彈性盒模型應(yīng)該是專門用來處理這種情況吧，但是又有新舊盒子模型之分，各瀏覽器實(shí)現(xiàn)的都不太一樣。所以一般情況兩套盒子模型的屬性都需要加上。（喜歡折騰就上吧，效果棒棒的）
 
4.classname實(shí)現(xiàn)
 
將需要特殊處理的元素加上單獨(dú)的class，再做相應(yīng)的處理?？梢院笈_(tái)進(jìn)行處理也可以前端處理（推薦后臺(tái)處理） 

CSS Code復(fù)制內(nèi)容到剪貼板
  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實(shí)現(xiàn)</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選擇器實(shí)現(xiàn)
 
:first-child :first-type-of :nth-child() 這些實(shí)現(xiàn)都沒有什么技術(shù)難點(diǎn)，大家可以去查閱一下css文檔，注意一下兼容性沒問題了

CSS Code復(fù)制內(nèi)容到剪貼板
  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選擇器實(shí)現(xiàn)(注意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
 
差點(diǎn)忘了還有一種情況X=2時(shí)，設(shè)置好width，左邊左浮動(dòng)，右邊右浮動(dòng)。
 
其實(shí)X=3時(shí)，還有一種處理方式，左右元素分別左右浮動(dòng)，中間元素相對(duì)于父級(jí)設(shè)置絕對(duì)定位，居中定位。
 
注意，由于不能整除的原因，不能像box-sizing那樣完美的計(jì)算，但是合理的應(yīng)用在項(xiàng)目上完全沒問題。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

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

相關(guān)文章

  • css 布局 之 兩端布局的實(shí)例代碼 （利用父級(jí)負(fù)的margin）

    這篇文章主要介紹了css 布局 之 兩端布局 （利用父級(jí)負(fù)的margin）的實(shí)例代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋
    2020-06-08

  • css如何利用負(fù)margin技術(shù)實(shí)現(xiàn)平均布局

    這篇文章主要介紹了css如何利用負(fù)margin技術(shù)實(shí)現(xiàn)平均布局，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一
    2020-03-09

  • CSS中使用負(fù)margin值來調(diào)整居中位置

    這篇文章主要介紹了CSS中使用負(fù)margin值來調(diào)整居中位置的方法,文中同時(shí)提到了這種常用方法的一些值得注意的地方,需要的朋友可以參考下
    2015-07-15

  • css利用負(fù)margin實(shí)現(xiàn)平均布局的示例

    這篇文章主要介紹了css利用負(fù)margin實(shí)現(xiàn)平均布局的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起
    2020-11-03

最新評(píng)論