写一个自适应九宫格静态页面

首先想到额是table：

1.用table标签可以很方便做一个3×3的表格：

     <div class="container">
      <table>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </table>
    </div>

2.使用css设置表格属性：

<style type="text/css">
  .container {
      width: 100%;
      line-height: 100%;
  }

  table {
    width: 100%;
    height: 90vw;
    border-spacing: 4vw;
  }

  td {
      background-color: yellow;
  }

<!--table的width属性表示其宽度占其容器宽的100%，这样就实现了宽度自适应;height使用单位vw，可以实现高度自适应，至于为什么是90vw？这是我自己试出来的，还请高手解答;同理，border-spacing使用vw单位定义了cell间距，可以使得间距自适应。-->

在了解了float的用法之后，又偿式使用div与float属性来制作：

1.建立九个div：

    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>

2.使用css实现float排列与自适应：

<style type="text/css">
  .container {
      width: 100%;
  }
  .item {
      background-color: yellow;
      float: left;
      padding-top: 31.3%;
      width: 31.3%;
      margin: 1%;
  }

float：left会使九个格子从左到右从上到下依次排列，定义了item的width为（100-6）/3=31.3%后，每行会有三个div;padding定义了div内容到边框的距离（默认为文字靠下边框），由于内容为空（不占空间），所以padding为div的高度，这样div就呈现为正方形。