前端总结CSS篇之九宫格

需求

1.宽高相等
2.自适应
3.上下间距20px

实现技巧

margin、padding百分比参照上级元素的宽度

代码

  <style>
    html,body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .wrap{
      width: 100%;
      position: relative;
      height: 0;
      padding-bottom: 100%;
    }
    .box{
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items:flex-start;
      flex-wrap: wrap;
    }
    .child{
      background: gray;
      width: calc(33.33% - 10px);
      height: calc(33.33% - 10px);
    }
  </style>
  <div class="wrap">
    <div class="box">
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
      <div class="child"></div>
    </div>    
  </div>
复制代码

效果如下：