1024 rem 与 em 与 vw 与表格作业

rem和em的区别

rem是相对于根字号，即相对于<html>标签的font-size实现的
参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值

表格

  <style>
    html{
      font-size: 24px;
    }
    .table{
      width: 50vw;
      border-collapse:collapse;
      border: 1px solid #e3e3e3;
    }
    td{
      text-align: center;
      height: 4rem;
      font-size: 1rem;
    }
  </style>
  <table border="1" class="table">
    <thead>
      <tr>
        <td></td>
        <td>周一</td>
        <td>周二</td>
        <td>周三</td>
        <td>周四</td>
        <td>周五</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
        <td>语文</td>
        <td>英语</td>
        <td>体育</td>
      </tr>
      <tr>
        <td>电脑</td>
        <td>语文</td>
        <td>体育</td>
        <td>英语</td>
        <td>数控</td>
      </tr>
      <tr>
        <td>生物</td>
        <td>数学</td>
        <td>地理</td>
        <td>语文</td>
        <td>历史</td>
      </tr>
      <tr>
        <td>数学</td>
        <td>政治</td>
        <td>语文</td>
        <td>历史</td>
        <td>文艺</td>
      </tr>
      <tr >
        <td colspan="6" align="center">午休</td>
      </tr>
      <tr>
        <td rowspan="2">下午</td>
        <td>数控</td>
        <td>英语</td>
        <td>电脑</td>
        <td>历史</td>
        <td>英语</td>
      </tr>
      <tr>
        <td>班会</td>
        <td>语文</td>
        <td>数学</td>
        <td>历史</td>
        <td>英语</td>
      </tr>
    </tbody>
  </table>

效果图
课程表

rem和em的区别

表格

相关文章