九宫格布局_常用九宫格布局的几大方法汇总

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

作者：郭菊锋

转发链接：https://mp.weixin.qq.com/s/4_fJvrluWPC_mO2dXctD_g

前言

小伙伴们是否还记得，之前小编也发布了几篇关于CSS相关文章不妨一起来回顾回顾：

《手把手整理CSS3知识汇总【思维导图】》

《关于前端CSS写法104个知识点汇总(一)》

《关于前端CSS写法104个知识点汇总(二)》

《前端开发规范：命名规范、html规范、css规范、js规范》

《手把手教你55 个提高CSS 开发效率的必备片段》

更多的CSS实现技巧相关文章请见文章底部

目录

1 margin负值实现

2 祖父和亲爹的里应外合

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

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

5 cloumn多栏布局

6 grid网格布局

7 display:table伪表格布局

8 css3选择器nth-child()

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

    1  2   3  4  5 6 7  8  9

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

/* 基础 */    .box{    background: #e4f7fd61;   border: 2px solid #0786ada1;     border-radius: 8px;   }   ul{      padding: 0;    }  .box li{     list-style: none;    text-align: center;    line-height: 200px;     background: rgba(146, 203, 230, 0.65);    border-radius: 8px;  }

方法一、margin负值实现

原理

原理：margin负边距

关键点

1. 最外层的包裹元素等于：li宽度*3+li右间距*22. 如果li是右间距，则ul的margin-right为负的li间距值。3. 父元素ul使用overflow:hidden;形成bfc，以清除浮动带来的影响(父元素塌陷)。 4. margin-bottom和margin-top的配合，是同right的理的，消除最后一排li撑开的底边距。5. li要浮动。外边距方向和ul设置负值的外边距方向一致。

关键代码

    .box{          width: 940px;     }    ul{        overflow: hidden;   margin-right: -20px;    margin-bottom: -20px;    margin-top: 0;   }   .box li{   float: left;      width: 300px;     height: 200px;     margin-right: 20px;    margin-bottom: 20px;  }

---

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

原理

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

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

关键点

1. box使用overflow:hidden;无情的砍掉li的右margin2. ul唱白脸，设置宽度坚持让三个li并排站，而不让最后一个li因为没地方挤到下一排。3. li 做最真诚的自己

关键代码

    .box{         width: 640px;         overflow: hidden;      }   ul{      width: 660px;    overflow: hidden;   margin-bottom: -20px;   margin-top: 0;    }  .box li{       float: left;     width: 200px;    height: 200px;      margin-right: 20px;    margin-bottom: 20px; }