CSS完成等遍布局的4种方法

日期:2020-12-13 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

等遍布局是指子元素均值分派父元素宽度的合理布局方法,本文将详细介绍完成等遍布局的4种方法

思路1: float

缺陷:构造和款式存在藕合性,IE7-访问器下对宽度百分比赋值存在4舍5入的偏差

【1】float + padding + background-clip

应用padding来完成子元素之间的间隔,应用background-clip使子元素padding一部分无法显示情况

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. body,p{margin: 0;}   
  3. .parentWrap{   
  4.     overflowhidden;   
  5. }   
  6. .parent{   
  7.     margin-right: -20px;   
  8.     overflowhidden;   
  9. }   
  10. .child{   
  11.     floatleft;   
  12.     height100px;   
  13.     width: 25%;   
  14.     padding-right20px;   
  15.     box-sizing: border-box;   
  16.     background-clipcontent-box;   
  17. }   
  18. </style>   
  19.   
XML/HTML Code拷贝內容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: lightblue;">1</div>  
  4.         <div class="child" style="background-color: lightgreen;">2</div>  
  5.         <div class="child" style="background-color: lightsalmon;">3</div>  
  6.         <div class="child" style="background-color: pink;">4</div>                   
  7.     </div>       
  8. </div>  
  9.   

【2】float + margin + calc

应用margin完成子元素之间的间隔,应用calc()涵数测算子元素的宽度

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. body,p{margin: 0;}   
  3. .parentWrap{   
  4.     overflowhidden;   
  5. }   
  6. .parent{   
  7.     overflowhidden;   
  8.     margin-right: -20px;   
  9. }   
  10. .child{   
  11.     floatleft;   
  12.     height100px;   
  13.     width: calc(25% - 20px);   
  14.     margin-right20px;   
  15. }   
  16. </style>  
XML/HTML Code拷贝內容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: lightblue;">1</div>  
  4.         <div class="child" style="background-color: lightgreen;">2</div>  
  5.         <div class="child" style="background-color: lightsalmon;">3</div>  
  6.         <div class="child" style="background-color: pink;">4</div>                   
  7.     </div>       
  8. </div>  
  9.   

【3】float + margin + (fix)

应用margin完成子元素之间的间隔,根据提升构造来完成适配

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. body,p{margin: 0;}   
  3. .parentWrap{   
  4.     overflowhidden;   
  5. }   
  6. .parent{   
  7.     overflowhidden;   
  8.     margin-right: -20px;   
  9. }   
  10. .child{   
  11.     floatleft;   
  12.     width: 25%;   
  13. }   
  14. .in{   
  15.     margin-right20px;   
  16.     height100px;   
  17. }   
  18. </style>   
  19.   
XML/HTML Code拷贝內容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: blue;">  
  4.             <div class="in" style="background-color: lightblue;">1</div>  
  5.         </div>  
  6.         <div class="child" style="background-color: green;">  
  7.             <div class="in" style="background-color: lightgreen;">2</div>  
  8.         </div>  
  9.         <div class="child" style="background-color: orange;">  
  10.             <div class="in" style="background-color: lightsalmon;">3</div>  
  11.         </div>  
  12.         <div class="child" style="background-color: red;">  
  13.             <div class="in" style="background-color: pink;">4</div>  
  14.         </div>                   
  15.     </div>       
  16. </div>  
  17.   

思路2: inline-block

缺陷:必须设定竖直对齐方法vertical-align,则必须解决换行符分析成空格的空隙难题。IE7-访问器不适用给块级元素设定inline-block特性,适配编码是display:inline;zoom:1;

【1】inline-block + padding + background-clip

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. body,p{margin: 0;}   
  3. .parentWrap{   
  4.     overflowhidden;   
  5. }   
  6. .parent{   
  7.     font-size: 0;   
  8.     margin-right: -20px;   
  9.     overflowhidden;   
  10. }   
  11. .child{   
  12.     display:inline-block;   
  13.     vertical-aligntop;   
  14.     width: 25%;   
  15.     padding-right20px;   
  16.     box-sizing: border-box;   
  17.     background-clipcontent-box;   
  18.     font-size16px;   
  19. }   
  20. </style>   
  21.   
XML/HTML Code拷贝內容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: lightblue;">1</div>  
  4.         <div class="child" style="background-color: lightgreen;">2</div>  
  5.         <div class="child" style="background-color: lightsalmon;">3</div>  
  6.         <div class="child" style="background-color: pink;">4</div>                   
  7.     </div>       
  8. </div>  
  9.   

【2】inline-block + margin + calc

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. body,p{margin: 0;}   
  3. .parentWrap{   
  4.     overflowhidden;   
  5. }   
  6. .parent{   
  7.     margin-right: -20px;   
  8.     font-size: 0;   
  9. }   
  10. .child{   
  11.     displayinline-block;   
  12.     vertical-aligntop;   
  13.     font-size16px;   
  14.     height100px;   
  15.     width: calc(25% - 20px);   
  16.     margin-right20px;   
  17. }   
  18. </style>   
  19.   
XML/HTML Code拷贝內容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: lightblue;">1</div>  
  4.         <div class="child" style="background-color: lightgreen;">2</div>  
  5.         <div class="child" style="background-color: lightsalmon;">3</div>  
  6.         <div class="child" style="background-color: pink;">4</div>                   
  7.     </div>       
  8. </div>  
  9.   

 【3】inline-block + margin + (fix)

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. body,p{margin: 0;}   
  3. .parentWrap{   
  4.     overflowhidden;   
  5. }   
  6. .parent{   
  7.     margin-right: -20px;   
  8.     font-size: 0;   
  9. }   
  10. .child{   
  11.     displayinline-block;   
  12.     vertical-aligntop;   
  13.     font-size16px;   
  14.     width: 25%;   
  15. }   
  16. .in{   
  17.     margin-right20px;   
  18.     height100px;   
  19. }   
  20. </style>   
  21.   
XML/HTML Code拷贝內容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: blue;">  
  4.             <div class="in" style="background-color: lightblue;">1</div>  
  5.         </div>  
  6.         <div class="child" style="background-color: green;">  
  7.             <div class="in" style="background-color: lightgreen;">2</div>  
  8.         </div>  
  9.         <div class="child" style="background-color: orange;">  
  10.             <div class="in" style="background-color: lightsalmon;">3</div>  
  11.         </div>  
  12.         <div class="child" style="background-color: red;">  
  13.             <div class="in" style="background-color: pink;">4</div>  
  14.         </div>                   
  15.     </div>       
  16. </div>  
  17.   

思路3: table

缺陷:元素被设定为table后,內容撑开宽度。若要适配IE7-访问器,必须改成<table>构造。table-cell元素没法设定margin,设定padding及background-clip也不能行

【1】table + margin负值

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. body,p{margin: 0;}   
  3. .parentWrap{   
  4.     overflowhidden;   
  5. }   
  6. .parent{   
  7.     display: table;   
  8.     width: calc(100% + 20px);   
  9.     table-layoutfixed;   
  10. }   
  11. .child{   
  12.     displaytable-cell;   
  13.     height100px;   
  14.     padding-right20px;   
  15. }   
  16. </style>   
  17.   
XML/HTML Code拷贝內容到剪贴板
  1. <div class="parentWrap">  
  2.     <div class="parent" style="background-color: lightgrey;">  
  3.         <div class="child" style="background-color: blue;">  
  4.             <div class="in" style="background-color: lightblue;">1</div>  
  5.         </div>  
  6.         <div class="child" style="background-color: green;">  
  7.             <div class="in" style="background-color: lightgreen;">2</div>  
  8.         </div>  
  9.         <div class="child" style="background-color: orange;">  
  10.             <div class="in" style="background-color: lightsalmon;">3</div>  
  11.         </div>  
  12.         <div class="child" style="background-color: red;">  
  13.             <div class="in" style="background-color: pink;">4</div>  
  14.         </div>                   
  15.     </div>       
  16. </div>  
  17.     


【2】table + 弟兄挑选器

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. body,p{margin: 0;}   
  3. .parent{   
  4.     display: table;   
  5.     width: 100%;   
  6.     table-layoutfixed;   
  7. }   
  8. .child{   
  9.     displaytable-cell;   
  10.     height100px;   
  11. }   
  12. .child + .child{   
  13.     padding-left20px;   
  14. }   
  15. </style>   
  16.   
XML/HTML Code拷贝內容到剪贴板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="child" style="background-color: blue;">  
  3.         <div class="in" style="background-color: lightblue;">1</div>  
  4.     </div>  
  5.     <div class="child" style="background-color: green;">  
  6.         <div class="in" style="background-color: lightgreen;">2</div>  
  7.     </div>  
  8.     <div class="child" style="background-color: orange;">  
  9.         <div class="in" style="background-color: lightsalmon;">3</div>  
  10.     </div>  
  11.     <div class="child" style="background-color: red;">  
  12.         <div class="in" style="background-color: pink;">4</div>  
  13.     </div>                   
  14. </div>       
  15.     

思路4: flex

CSS Code拷贝內容到剪贴板
  1. <style>   
  2. body,p{margin: 0;}   
  3. .parent{   
  4.     display: flex;   
  5. }   
  6. .child{   
  7.     flex:1;   
  8.     height100px;   
  9. }   
  10. .child + .child{   
  11.     margin-left20px;   
  12. }   
  13. </style>   
  14.   
XML/HTML Code拷贝內容到剪贴板
  1. <div class="parent" style="background-color: lightgrey;">  
  2.     <div class="child" style="background-color: lightblue;">1</div>  
  3.     <div class="child" style="background-color: lightgreen;">2</div>  
  4.     <div class="child" style="background-color: lightsalmon;">3</div>  
  5.     <div class="child" style="background-color: pink;">4</div>                   
  6. </div>     
  7.   

 以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。

本文连接:http://www.cnblogs.com/xiaohuochai/p/5456695.html