1、九宫格

 html

<!-- 综合实力：flex布局、box-sizing、css选择器、z-index、页边距 -->
<ul class="grid">
  <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>

css

<style>
  body{
    padding: 50px;
  }
  .grid{
    display: flex;
    flex-wrap: wrap;
    width: 300px;
  }
  .grid li{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 4px solid #ccc;
    box-sizing: border-box;
    margin-left: -4px;
    margin-top: -4px;
  }
  /* 1、4、7 */
  .grid li:nth-child(3n+1) {
    margin-left: 0;
  }
  .grid li:hover{
    border-color: red;
    z-index: 2;
  }
</style>