box{       padding： 20px 10px； display： inline-block；   background： #ff000026； }    ul{ overflow： hidden；   width： 600px；   margin-bottom： -10px；   margin-top： 0；   background： none；   }   li{   list-style： none；   float： left；   width： 198px；/*可以用百分比*/   height： 198px；/*可以用百分比*/     margin-bottom： 10px；   border： 1px solid red；    }   li  > div{     background： rgba（255， 0， 0， 0。24）；   margin： 0 10px；   border-radius： 8px；   text-align： center；   line-height： 198px；   }

去掉紅色border後的效果

li與嫡長子的左邊距作用於淺紅和深紅之間的左邊距， li嫡長子的右邊距和下一個li嫡長子的左邊距綜合 構成了兩個li之間的間距。

方法四、藉助absolute方位值，實現自適應的網格佈局

自適應？先來一波效果圖：

原理

原理：absolute+四個方位值撐開局面、float+寬度百分比實現橫向排列。高度百分比實現自適應。

關鍵點

1。 page最外層的父元素使用absolute負責佔位，給子元素們把空間拉開。或者用寬高也行

2。 每一個塊的父元素list利用浮動和33。33%的寬度百分比實現橫向自適應排列3。 本案例中，list元素內部用了偽元素+absolute的方式做了效果展示，實際專案中，list元素裡邊就可以填充自己個各式各樣的業務程式碼了。

關鍵程式碼

html，body{   height：100%； margin：0；} 。page{ position：absolute；   left：0；   top：180px；   right：0； bottom：0；} 。list{ float：left；   height：33。3%；   width：33。3%； position：relative；} 。list：before{ content：‘’； position：absolute； left：10px；     right：10px； top：10px；   bottom：10px； border-radius：10px； background-color：#cad5eb；} 。list：after{   content：attr（data-index）；   position：absolute；   height：30px； left：0； right：0；   top：0；   bottom：0；   margin：auto； text-align：center； font：24px/30px bold ‘microsoft yahei’；}

方法五、cloumn多欄佈局

原理

原理：cloumn設定三欄佈局，這種還是自適應效果的

關鍵點

1。 box依舊做了最嚴格的祖父，又是寬度限制，又是overflow決絕設卡。2。 ul這次挑了大梁，針對內部的li使用column多欄佈局，設定為三欄顯示，且每一欄之間3。 而有了ul的操心，li則美滋滋的做起了公子哥，只管自己的寬高和下邊距就好，右邊距他爹都給他處理好了。

關鍵程式碼

。box{    width： 640px；   overflow： hidden；}ul {    /* display： flex； */    -webkit-column-count： 3；    -moz-column-count： 3；    -webkit-column-gap： 20px；    -moz-column-gap： 20px；    margin-bottom： -20px；    margin-top： 0；}li {    width： 200px；    height： 200px；    /*margin-right： 20px；*/    margin-bottom： 20px；}

方法六、grid網格佈局

原理

原理：用CSS Grid 建立網格佈局，是最簡單也是最強大的方法。

關鍵點

1。 九個單元的父元素wrapper設定display為grid型別（注意相容寫法）

預設九個元素就會堆疊排序。

2。 設定每一行中單個元素的寬度： grid-template-columns，每個寬度值100px根據業務需要設定。

給三個設定了寬度就長這樣了。

3。 設定每一列中單個元素的高度： grid-template-rows，每個高度值100px根據業務需要設定。

最後出現我們想要的效果：

關鍵程式碼

。wrapper{     display： grid；     grid-template-columns： 100px 100px 100px；   grid-template-rows： 100px 100px 100px；} 。list{     background： #eee；} 。list：nth-child（odd）{     background： #999； }

方法七、display：table；

原理

原理：其實他是table的css版本處理方式。原諒我只能想到加結構、模擬tr+td的方式實現了。好處：也是唯一能用來安慰自己的地方就是，不用table標籤少了很多reset樣式~

關鍵點

1。 三行li，每個li裡三列div（模擬表格的結構）2。 父元素ul使用display： table（此元素會作為塊級表格來顯示（類似