九宫格布局

重置样式

* {
    padding:0;
    margin:0;
    box-sizing:border-box;
  }
li{
    list-style:none;
}
section{
    margin:50px auto;
}

第一种 flex 布局

<section>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ul>
</section>

ul{
    width:300px;
    display:flex;
    flex-wrap:wrap;
}
ul li{
    width:100px;
    height:100px;
    line-height:100px;
    text-align:center;
    margin-left:-4px;
    margin-right:-4px;
    border:4px solid #skyblue;
}
li:hover{
    border-color:pink;
    z-index:2;
}
ul:nth-child(3n+1){
    margin-left:0px;
    margin-top:0px;
}

第二种 grid 布局

<section>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
    </ol>
</section

ol{
    display:grid;
    width:300px;
    height:300px;
    grid-template-colums:repeat(3,100px);
    grid-template-rows:repeat(3,100px);
}
ol li{
    border:4px solid #skyblue;
    margin-left:-4px;
    margin-right:-4px;
    text-align:center;
    line-height:100px;
}
ol li:hover{
    border-color:pink;
    z-index:2;
}

注意点：

盒模型

z-index 层级关系

高阶css样式

负边距使用

合理的使用标签

样式重置（兼容问题）