Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1024 rem 与 em 与 vw 与表格作业
Blogger Information
Blog 10
fans 0
comment 0
visits 4843
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1024 rem 与 em 与 vw 与表格作业
onbind
Original
843 people have browsed it

rem和em的区别

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

表格

  1.   <style>
  2.     html{
  3.       font-size: 24px;
  4.     }
  5.     .table{
  6.       width: 50vw;
  7.       border-collapse:collapse;
  8.       border: 1px solid #e3e3e3;
  9.     }
  10.     td{
  11.       text-align: center;
  12.       height: 4rem;
  13.       font-size: 1rem;
  14.     }
  15.   </style>
  16.   <table border="1" class="table">
  17.     <thead>
  18.       <tr>
  19.         <td></td>
  20.         <td>周一</td>
  21.         <td>周二</td>
  22.         <td>周三</td>
  23.         <td>周四</td>
  24.         <td>周五</td>
  25.       </tr>
  26.     </thead>
  27.     <tbody>
  28.       <tr>
  29.         <td rowspan="4">上午</td>
  30.         <td>语文</td>
  31.         <td>数学</td>
  32.         <td>语文</td>
  33.         <td>英语</td>
  34.         <td>体育</td>
  35.       </tr>
  36.       <tr>
  37.         <td>电脑</td>
  38.         <td>语文</td>
  39.         <td>体育</td>
  40.         <td>英语</td>
  41.         <td>数控</td>
  42.       </tr>
  43.       <tr>
  44.         <td>生物</td>
  45.         <td>数学</td>
  46.         <td>地理</td>
  47.         <td>语文</td>
  48.         <td>历史</td>
  49.       </tr>
  50.       <tr>
  51.         <td>数学</td>
  52.         <td>政治</td>
  53.         <td>语文</td>
  54.         <td>历史</td>
  55.         <td>文艺</td>
  56.       </tr>
  57.       <tr >
  58.         <td colspan="6" align="center">午休</td>
  59.       </tr>
  60.       <tr>
  61.         <td rowspan="2">下午</td>
  62.         <td>数控</td>
  63.         <td>英语</td>
  64.         <td>电脑</td>
  65.         <td>历史</td>
  66.         <td>英语</td>
  67.       </tr>
  68.       <tr>
  69.         <td>班会</td>
  70.         <td>语文</td>
  71.         <td>数学</td>
  72.         <td>历史</td>
  73.         <td>英语</td>
  74.       </tr>
  75.     </tbody>
  76.   </table>

效果图
课程表

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post