我便是要用CSS完成9宫格图

日期:2021-03-04 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

下图是手Q吃喝玩耍  朋友去哪儿9宫格图的图示:

 

从上图大家能够剖析出以下要求:

  • 照片尺寸自融入;
    照片个数不一样时,照片依照特定方法排序;
    照片邻近处有1px空白空隙。

大家以最繁杂的6图合理布局为例,1步1步看来怎样以纯CSS完成。

1、float合理布局

最非常容易想起的,也是最简易的计划方案,便是 float 合理布局:

照片尺寸自融入:宽度百分比,高宽比应用 padding-top 百分比
照片个数不一样时,照片依照特定方法排序:应用 nth-child 伪类特定不一样状况下的元素尺寸
照片邻近处有1px空白空隙:应用 border-box + border仿真模拟边框

这里父元素的高宽比未知,height应用百分比行堵塞,而padding的百分比值是根据父元素的宽度来测算的,大家可使用padding-top撑开高宽比。

让大家1瞅伪码:

XHTML

XML/HTML Code拷贝內容到剪贴板
  1. <div class="float">  
  2.     <div class="item">1</div>  
  3.     ...   
  4.     <div class="item">6</div>  
  5. </div>  

 CSS

CSS Code拷贝內容到剪贴板
  1. .float {   
  2.     overflowhidden;   
  3. }   
  4. .item {   
  5.     floatleft;   
  6.     padding-top: 33.3%;   
  7.     width: 33.3%;   
  8.     border-right1px solid #fff;   
  9.     border-top1px solid #fff;   
  10. }   
  11. .item:nth-child(1) {   
  12.     padding-top: 66.6%;   
  13.     width: 66.6%;   
  14. }   
  15. .item:nth-child(2), .item:nth-child(3), .item:nth-child(6) {   
  16.     border-right: 0 none;   
  17. }   
  18. .item:nth-child(1), .item:nth-child(2) {   
  19.     border-top: 0 none;   
  20. }    

具体实际效果其实不理想化,以下图:

能够看到 float 合理布局的优势是DOM构造10分简易,缺陷是非常容易出現空白空隙移位,优缺陷都10明晰显,它更可用于js测算的版本号。

2、flex合理布局

也有谁?flex!flex合理布局有下列关键特点:

  • 能够将 flex 合理布局下的元素展现在同1水平、竖直方位上;
    能够适用全自动换行、换列(挪动端-webkit-box暂不适用,好信息是从iOS9.2、Android4.4刚开始都适用新flex了);
    能够特定 flex 合理布局下的元素怎样分派室内空间,可让元素全自动占满父元素剩下室内空间;
    能够特定 flex 合理布局下的元素的展现方位,排序方法。

这里边的子元素同1水平、竖直方位展现对大家很有协助,它使大家更非常容易操纵子元素的排序,而不容易移位。

应用 flex 合理布局与 float 合理布局不一样的地区在于,挪动端现阶段关键還是-webkit-box,因而照片个数不一样时,大家必须应用不一样的html,组成出不一样的块。

flex 合理布局左右区划

来,大家快动手能力分层吧!新处理计划方案出現致使的肾上腺素升高,使大家急不可耐应用了传统式css文本文档流自上而下的方法来区划,我称为左右区划,以下图:

上面1块包括左边1个2/3的大块,右边2个1/3的小块,下面1块则是3个1/3的小块。

大家特定2/3的大块宽度是66.6%,1/3的小块宽度是33.3%(具体可使用-webkit-box-flex来分派,这里以便下面的测算便捷)。

看来下具体实际效果,你还可以猛击demo来查询源代码:

demo中大家看到正中间那条竖空白空隙移位了,为何?依照预期大家上面块左边宽度66.6%,下面块左边宽度33.3% + 33.3%,两个宽度应当相同才对。

但是大家忽视了flex1个关键特点,子元素会全自动占满父元素剩下室内空间,这时候子元素宽度测算受flex操纵,下面块的3个子元素宽度测算并不是1定是相同的,会一些许差别,此时66.6% != 33.3% + 33.3%。

如何破!别急,让大家理智下来再次思索怎样区划。

flex 合理布局上下区划

难题在于竖空隙涉及到到的上下侧宽度测算不平稳,既然这般,大家能够考虑到根据竖空隙上下区划,清除不平稳要素,以下图:

这样就处理了竖空隙移位难题,但大家仍然有一定的担忧,正中间的横空隙会移位吗?大家来算1下。

总体父元素宽度明确,为W;

总体父元素高宽比由子元素撑开,不确定性;

左边大块高宽比:左边flex父元素宽度(W * 66.6%) * 100% = W * 66.6%;

左边小块高宽比:左边flex父元素宽度( W * 66.6%) * 50% = W * 33.3%;

右边小块高宽比:右边flex父元素宽度( W * 33.3%) * 100% = W * 33.3%。

仍然是66.6%与33.3% + 33.3%的等式,但这次高宽比测算会受 flex 危害吗?

不容易,由于此时总体父元素的高宽比是不确定性的,是由子元素內容撑开的,flex的高宽比也是由子元向来撑开的。

最后 66.6% === 33.3% + 33.3%

大家看来下伪码,猛击我看demo:

XHTML

XML/HTML Code拷贝內容到剪贴板
  1. <div class="wrap-box wrap⑹">  
  2.     <div class="flex-inner">  
  3.       <div class="flex-box1 flex-item"></div>  
  4.       <div class="flex-box2">  
  5.         <div class="flex-item"></div>  
  6.         <div class="flex-item"></div>  
  7.       </div>  
  8.     </div>  
  9.     <div class="flex-inner">  
  10.       <div class="flex-item"></div>  
  11.       <div class="flex-item"></div>  
  12.       <div class="flex-item"></div>  
  13.     </div>  
  14. </div>  
  15.     

CSS

CSS Code拷贝內容到剪贴板
  1. .wrap-box {   
  2.   display: -webkit-box;   
  3. }   
  4.     
  5. .flex-inner {   
  6.     -webkit-box-flex: 1;   
  7.     display: -webkit-box;   
  8. }   
  9.     
  10. .flex-item {   
  11.     -webkit-box-flex: 1;   
  12.     positionrelative;   
  13. }   
  14. .wrap⑹ {   
  15.       -webkit-box-orient: horizontal;   
  16. }   
  17. .wrap⑹ .flex-inner {   
  18.       -webkit-box-flex: 0;   
  19.       -webkit-box-orient: vertical;   
  20. }   
  21. .wrap⑹ .flex-inner:first-child {   
  22.       width: 66.6%;   
  23. }   
  24. .wrap⑹ .flex-inner:last-child {   
  25.       width: 33.3%;   
  26. }   
  27. .wrap⑹ .flex-item {   
  28.       padding-top: 100%;   
  29. }   
  30. .wrap⑹ .flex-box2 .flex-item {   
  31.       padding-top: 50%;   
  32. }   
  33. .wrap⑹ .flex-box2 {   
  34.       display: -webkit-box;   
  35.       -webkit-box-orient: horizontal;   
  36. }   
  37. .wrap⑹ .flex-inner:first-child,   
  38. .wrap⑹ .flex-box2 .flex-item:first-child {   
  39.       margin-right1px;   
  40. }   
  41. .wrap⑹ .flex-box1,   
  42. .wrap⑹ .flex-inner:last-child .flex-item:first-child,   
  43. .wrap⑹ .flex-inner:last-child .flex-item:nth-child(2) {   
  44.       margin-bottom1px;   
  45. }   

具体实际效果:

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