【CSS】340- 常用九宫格布局的几大方法汇总

对,就是类似这样的布局~

目录

1  margin负值实现


2  祖父和亲爹的里应外合


3  换个思路 - li生个儿子帮大忙


4 借助absolute方位值,实现自适应的网格布局


5 cloumn多栏布局


6 grid网格布局


7 display:table伪表格布局


8 css3选择器nth-child()

 




除非特别说明,以下几种方式的通用html结构如下:

  1. <div class="box">

  2.    <ul>

  3.      <li>1</li>

  4.      <li>2</li>

  5.      <li>3</li>

  6.      <li>4</li>

  7.      <li>5</li>

  8.      <li>6</li>

  9.      <li>7</li>

  10.      <li>8</li>

  11.      <li>9</li>

  12.    </ul>

  13.  </div>

除特别说明,布局中用到的css reset代码如下:

  1. /* 基础 */

  2.    .box{

  3.      background: #e4f7fd61;

  4.      border: 2px solid #0786ada1;

  5.      border-radius: 8px;

  6.    }

  7.    ul{

  8.      padding: 0;

  9.    }

  10.    .box li{

  11.      list-style: none;

  12.      text-align: center;

  13.      line-height: 200px;

  14.      background: rgba(146, 203, 230, 0.65);

  15.      border-radius: 8px;

  16.    }

方法一、margin负值实现

原理

  1. 原理:margin负边距

关键点

  1. 1. 最外层的包裹元素等于:li宽度*3+li右间距*2

  2. 2. 如果li是右间距,则ul的margin-right为负的li间距值。

  3. 3. 父元素ul使用overflow:hidden;形成bfc,以清除浮动带来的影响(父元素塌陷)。

  4. 4. margin-bottom和margin-top的配合,是同right的理的,消除最后一排li撑开的底边距。

  5. 5. li要浮动。外边距方向和ul设置负值的外边距方向一致。

关键代码

  1.    .box{

  2.      width: 940px;

  3.    }

  4.    ul{

  5.      overflow: hidden;

  6.      margin-right: -20px;


  7.      margin-bottom: -20px;

  8.      margin-top: 0;

  9.    }

  10.    .box li{

  11.      float: left;

  12.      width: 300px;

  13.      height: 200px;

  14.      margin-right: 20px;

  15.      margin-bottom: 20px;

  16.    }


方法二、祖父和亲爹的里应外合

原理

  1. 原理:外层box盒子overflow和ul元素宽度死值相结合

其实换一种角度和思路,又是一个解决方法,不用margin负值,我们想要li要对其ul两端效果,之所以纠结是因为li又需要margin-right,而右边最后一个li的margin又会撑开和父亲ul的距离,让我们头疼。 那既然是节外生枝,我们直接让祖父砍掉多出来的那一节不就行了?父亲ul设置宽度,坚持让儿子占他的位置,而box祖父就做一个坏人,使用overflow砍掉多余出来的一个margin-right的距离。

关键点

  1. 1. box使用overflow:hidden;无情的砍掉li的右margin

  2. 2. ul唱白脸,设置宽度坚持让三个li并排站,而不让最后一个li因为没地方挤到下一排。

  3. 3. li 做最真诚的自己

关键代码

  1.    .box{

  2.      width: 640px;

  3.      overflow: hidden;

  4.    }

  5.    ul{

  6.      width: 660px;

  7.      overflow: hidden;


  8.      margin-bottom: -20px;

  9.      margin-top: 0;

  10.    }

  11.    .box li{

  12.      float: left;

  13.      width: 200px;

  14.      height: 200px;

  15.      margin-right: 20px;

  16.      margin-bottom: 20px;

  17.    }  

 


方法三、换个思路 - li生个儿子帮大忙。

 间距不一定要加在父元素li身上的,父元素li可以只负责流体布局,内部用padding或第一层子元素来控制和相邻元素的间距

原理

  1. 原理:图片中的红色边框,是li元素,红色边框总的深红区域是li元素内部的子元素。红边框和子元素之间的白色距离是子元素的margin生成。

关键点

  1. 1. 父元素box以前20的内边距,这次改成10,因为外孙li>div会帮忙的。

  2. 2. li不再设置margin-right来撑开多个li之间的距离

  3. 3. li内部的div设置左右margin来撑开li和li以及li和父元素之间的距离。

关键代码

这里html结构就要变化一下,除了之前的结构,li内部要多加一个div结构了,作用就是撑开间距。

  1.  <div class="sec02">

  2.    <h3>

  3.      里应外合-li的边距交给孩子们来做,自己只负责一排站三个人的排列工作

  4.    </h3>

  5.    <div class="box">

  6.      <ul>

  7.        <li><div>1</div></li>

  8.        <li><div>2</div></li>

  9.        <li><div>3</div></li>

  10.        <li><div>4</div></li>

  11.        <li><div>5</div></li>

  12.        <li><div>6</div></li>

  13.        <li><div>7</div></li>

  14.        <li><div>8</div></li>

  15.        <li><div>9</div></li>

  16.      </ul>

  17.    </div>

  18.  </div>

  1.   box{

  2.      padding: 20px 10px;

  3.      display: inline-block;

  4.      background: #ff000026;

  5.    }

  6.    ul{

  7.      overflow: hidden;

  8.      width: 600px;

  9.      margin-bottom: -10px;

  10.      margin-top: 0;

  11.      background: none;

  12.    }

  13.    li{

  14.      list-style: none;

  15.      float: left;

  16.      width: 198px;/*可以用百分比*/

  17.      height: 198px;/*可以用百分比*/

  18.      margin-bottom: 10px;


  19.      border: 1px solid red;

  20.    }

  21.    li  > div{

  22.      background: rgba(255, 0, 0, 0.24);

  23.      margin: 0 10px;

  24.      border-radius: 8px;

  25.      text-align: center;

  26.      line-height: 198px;

  27.    }

去掉红色border后的效果 

 li与嫡长子的左边距作用于浅红和深红之间的左边距, li嫡长子的右边距和下一个li嫡长子的左边距综合 构成了两个li之间的间距。


方法四、借助absolute方位值,实现自适应的网格布局

自适应?先来一波效果图: 

原理

  1. 原理:absolute+四个方位值撑开局面、float+宽度百分比实现横向排列。高度百分比实现自适应。

关键点

  1. 1. page最外层的父元素使用absolute负责占位,给子元素们把空间拉开。或者用宽高也行

  1. 2. 每一个块的父元素list利用浮动和33.33%的宽度百分比实现横向自适应排列

  2. 3. 本案例中,list元素内部用了伪元素+absolute的方式做了效果展示,实际项目中,list元素里边就可以填充自己个各式各样的业务代码了。

关键代码

  1. <div class="page">

  2.    <div class="list" data-index="1">

  3.    </div>

  4.    <div class="list" data-index="2">

  5.    </div>

  6.    <div class="list" data-index="3">

  7.    </div>

  8.    <div class="list" data-index="4">

  9.    </div>

  10.    <div class="list" data-index="5">

  11.    </div>

  12.    <div class="list" data-index="6">

  13.    </div>

  14.    <div class="list" data-index="7">

  15.    </div>

  16.    <div class="list" data-index="8">

  17.    </div>

  18.    <div class="list" data-index="9">

  19.    </div>

  20. </div>

  1. html,body{

  2.    height:100%;

  3.    margin:0;

  4. }

  5. .page{

  6.    position:absolute;

  7.    left:0;

  8.    top:180px;

  9.    right:0;

  10.    bottom:0;

  11. }

  12. .list{

  13.    float:left;

  14.    height:33.3%;

  15.    width:33.3%;

  16.    position:relative;

  17. }

  18. .list:before{

  19.    content:'';

  20.    position:absolute;

  21.    left:10px;

  22.    right:10px;

  23.    top:10px;

  24.    bottom:10px;

  25.    border-radius:10px;

  26.    background-color:#cad5eb;

  27. }

  28. .list:after{

  29.    content:attr(data-index);

  30.    position:absolute;

  31.    height:30px;

  32.    left:0;

  33.    right:0;

  34.    top:0;

  35.    bottom:0;

  36.    margin:auto;

  37.    text-align:center;

  38.    font:24px/30px bold 'microsoft yahei';

  39. }


方法五、cloumn多栏布局

原理

  1. 原理:cloumn设置三栏布局,这种还是自适应效果的

关键点

  1. 1. box依旧做了最严格的祖父,又是宽度限制,又是overflow决绝设卡。

  2. 2. ul这次挑了大梁,针对内部的li使用column多栏布局,设置为三栏显示,且每一栏之间

  3. 3. 而有了ul的操心,li则美滋滋的做起了公子哥,只管自己的宽高和下边距就好,右边距他爹都给他处理好了。

关键代码

  1. .box{

  2.    width: 640px;

  3.    overflow: hidden;

  4. }

  5. ul {

  6.    /* display: flex; */

  7.    -webkit-column-count: 3;

  8.    -moz-column-count: 3;

  9.    -webkit-column-gap: 20px;

  10.    -moz-column-gap: 20px;

  11.    margin-bottom: -20px;

  12.    margin-top: 0;

  13. }

  14. li {

  15.    width: 200px;

  16.    height: 200px;

  17.    /*margin-right: 20px;*/

  18.    margin-bottom: 20px;

  19. }


方法六、grid网格布局

原理

  1. 原理:用CSS Grid 创建网格布局,是最简单也是最强大的方法。

关键点

  1. 1. 九个单元的父元素wrapper设置display为grid类型(注意兼容写法)

默认九个元素就会堆叠排序。 

  1. 2. 设置每一行中单个元素的宽度: grid-template-columns,每个宽度值100px根据业务需要设置。

给三个设置了宽度就长这样了。 

  1. 3. 设置每一列中单个元素的高度: grid-template-rows,每个高度值100px根据业务需要设置。

最后出现我们想要的效果: 

关键代码

  1. <div class="wrapper">

  2.    <div class="list list1">

  3.        1

  4.    </div>

  5.    <div class="list list2">

  6.        2

  7.    </div>

  8.    <div class="list list3">

  9.        3

  10.    </div>

  11.    <div class="list list4">

  12.        4

  13.    </div>

  14.    <div class="list list5">

  15.        5

  16.    </div>

  17.    <div class="list list6">

  18.        6

  19.    </div>

  20.    <div class="list list7">

  21.        7

  22.    </div>

  23.    <div class="list list8">

  24.        8

  25.    </div>

  26.    <div class="list list9">

  27.        9

  28.    </div>

  29. </div>

  1. .wrapper{

  2.     display: grid;

  3.     grid-template-columns: 100px 100px 100px;

  4.     grid-template-rows: 100px 100px 100px;

  5. }

  6. .list{

  7.     background: #eee;

  8. }

  9. .list:nth-child(odd){

  10.     background: #999;

  11. }  


方法七、display:table;

原理

  1. 原理:其实他是table的css版本处理方式。原谅我只能想到加结构、模拟tr+td的方式实现了。

  2. 好处:也是唯一能用来安慰自己的地方就是,不用table标签少了很多reset样式~

关键点

  1. 1. 三行li,每个li里三列div(模拟表格的结构)

  2. 2. 父元素ul使用display: table(此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。)

  3. 3. li元素使用display: table-row(此元素会作为一个表格行显示(类似 <tr>)。)

  4. 4. li元素内部三个子元素使用display: table-cell(此元素会作为一个表格单元格显示(类似 <td><th>))

关键代码

html:

  1.    <ul class="table">

  2.      <li>

  3.        <div>1</div>

  4.        <div>2</div>

  5.        <div>3</div>

  6.      </li>

  7.      <li>

  8.        <div>4</div>

  9.        <div>5</div>

  10.        <div>6</div>

  11.      </li>

  12.      <li>

  13.        <div>7</div>

  14.        <div>8</div>

  15.        <div>9</div>

  16.      </li>

  17.    </ul>

css:

  1.    .table {

  2.      display: table;

  3.    }

  4.    .table li {

  5.      display: table-row;

  6.      background: #beffee;

  7.    }

  8.    .disTable li:nth-child(odd) {

  9.      background: #bec3ff;

  10.    }

  11.    .table li div {

  12.      width: 200px;

  13.      line-height: 200px;

  14.      display: table-cell;


  15.      text-align: center;

  16.    }

  17.    .table li:nth-child(odd) div:nth-child(even) {

  18.      background: #beffee;

  19.    }

  20.    .table li:nth-child(even) div:nth-child(even) {

  21.      background: #bec3ff;

  22.    }



方法八、css3选择器nth-child()

原理

  1. 原理:利用css的选择器,选择对应个数的li,设置特殊样式。

不足

  1. 缺点:li必须要设置固定的宽高,且ul也要设置固定宽高,以强制似的li“归位”。

关键点

  1. 1.  li.nth-child(3n):控制第3以及3的倍数的li的右边距不存在。

关键代码

  1. <ul class="lists">

  2.    <li class="list list1">1</li>

  3.    <li class="list list2">2</li>

  4.    <li class="list list3">3</li>

  5.    <li class="list list4">4</li>

  6.    <li class="list list5">5</li>

  7.    <li class="list list6">6</li>

  8.    <li class="list list7">7</li>

  9.    <li class="list list8">8</li>

  10.    <li class="list list9">9</li>

  11.  </ul>

  1.  ul,li{

  2.      list-style: none;

  3.      overflow: hidden;

  4.    }

  5.    ul{

  6.      width: 620px;

  7.    }

  8.    li.list{

  9.      float: left;

  10.      width: 200px;

  11.      height: 200px;

  12.      margin-right: 10px;

  13.      margin-bottom: 10px;

  14.      background: #eee;

  15.    }

  16.    li:nth-child(3n){

  17.      margin-right: 0;

  18.    }


以上,几乎都没有考虑兼容性。因为很多css3方法,掰着脚指头想兼容性也不会如你意。

如果pc求稳,就用前几招。

如果移动求快准狠,就用后几招。


至此,布局篇告一段落~

原创系列推荐
1. JavaScript 重温系列(22篇全)
2. ECMAScript 重温系列(10篇全)
3. JavaScript设计模式 重温系列(9篇全)
4. 正则 / 框架 / 算法等 重温系列(16篇全)
5. Webpack4 入门手册(共 18 章)(上)
6. Webpack4 入门手册(共 18 章)(下)
7. 59篇原创系列汇总

点这,与大家一起分享本文吧~
评论