能力怎么增长？在火车上也要写1011号作业 -

1.效果

2.代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简写与相对单位</title>
  </head>
  <style>
    table {
      border: 0.3rem solid black;
      width: 100%;
    }
    .div1 {
      background-color: teal;
      padding: 1em;
    }
    .div2 {
      background-color: thistle;
      padding: 1em 2em;
    }
    .div3 {
      background-color: tomato;
      padding: 1em 2em 3em;
    }
    .div4 {
      background-color: turquoise;
      padding: 1em 2em 3em 4em;
    }
  </style>
  <body>
    <div class="div1">
      <table>
        <tr>
          <th>div1层padding: 1em;</th>
          <th>border: 0.3rem solid black; width: 100%;</th>
        </tr>
      </table>
      <div class="div2">
        <table>
          <tr>
            <th>div2层padding: 1em 2em;</th>
            <th>border: 0.3rem solid black; width: 100%;</th>
          </tr>
        </table>
        <div class="div3">
          <table>
            <tr>
              <th>div3层padding: 1em 2em 3em;</th>
              <th>border: 0.3rem solid black; width: 100%;</th>
            </tr>
          </table>
          <div class="div4">
            <table>
              <tr>
                <th>div4层padding: 1em 2em 3em 4em;</th>
                <th>border: 0.3rem solid black; width: 100%;</th>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

3.总结

简写实际上中多个属性写到一块儿
em rem % 是为了多设备都可以访问，灵活编程，找了个默认字体大小作为基础，来实现相对单位。

谢谢，老师！