1、flex布局

技术点：flex布局、box-sizing、css选择器、z-index、页边距

html代码

    
    
     
      1
     
    
     
      2
     
    
     
      3
     
    
     
      4
     
    
     
      5
     
    
     
      6
     
    
     
      7
     
    
     
      8
     
    
     
      9
     
    
复制代码

css代码

.grid{    display: flex;    flex-wrap: wrap;    width: 300px;}.grid > div{    width: 100px;    height: 100px;    border: 4px solid #ccc;    box-sizing: border-box;    margin-left: -4px;    margin-top: -4px;}/* 1、4、7 */.grid > div:nth-child(3n+1) {    margin-left: 0;}.grid > div:hover{    border-color: red;    z-index: 2;}复制代码

2、grid布局

Grid非常强大,可以实现各种各样的三维布局

html代码：

    
    
     
      1
     
    
     
      2
     
    
     
      3
     
    
     
      4
     
    
     
      5
     
    
     
      6
     
    
     
      7
     
    
     
      8
     
    
     
      9
     
    
复制代码

css代码：

.grid {    width: 300px;    height: 300px;    margin: 0 auto;    display: grid;    grid-template-columns: repeat(3, 1fr); /*等同于1fr 1fr 1fr,此为重复的合并写法*/    grid-template-rows: repeat(3, 1fr);  /*等同于1fr 1fr 1fr,此为重复的合并写法*/}.grid > div {    border: 4px solid #000;    margin-left: -4px;    margin-top: -4px;}.grid > div:hover{    border-color: red;    z-index: 2;}复制代码