Blogger Information
Blog 28
fans 0
comment 0
visits 13058
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS常用单位em和rem以及重写课程表案例
手机用户1594223549
Original
746 people have browsed it

一.CSS常用单位em和rem

1.em和rem的特点

em: 继承字号,受自身和祖先影响,默认16px;
rem: 根字号, 字号常量不变,默认16px,除非人为更新,否则不变;

2.em和rem的应用场景

em: 用于PC端;
rem: 用于移动端;

3.为什么推荐使用rem?

因为em受到当前和祖先元素影响,而rem作为根字号是一个不变的字号常量,除非人为更新,具有可控性,所以rem更好用。

二.rem + vw 重写课程表案例

1.输出结果

2.代码部分

```html
<!DOCTYPE html>

<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小学课程表</title>
<style>
table td,
table th {
border: 0.02rem solid #000;
}

  1. table {
  2. border-collapse: collapse;
  3. }
  4. table {
  5. width: 90vw;
  6. margin: auto;
  7. text-align: center;
  8. }
  9. table caption {
  10. font-size: 3em;
  11. margin-bottom: 1em;
  12. }
  13. table thead {
  14. background-color: greenyellow;
  15. }
  16. table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  17. background-color: greenyellow;
  18. }
  19. </style>

</head>
<body>
<table>
<caption>
小学课程表
</caption>
<thead>
<tr>
<th>时间</th>
<th>周一</th>
<th>周二</th>
<th>周三</th>
<th>周四</th>
<th>周五</th>
</tr>
</thead>
<!-- 上午 -->
<!-- 第一个tbody -->
<tbody>
<tr>
<td rowspan="4" class="period">上午</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>
</tbody>
<!-- 中午 -->

  1. <!-- 第二个tbody -->
  2. <tbody>
  3. <tr>
  4. <td colspan="6">中午休息</td>
  5. </tr>
  6. </tbody>
  7. <!-- 下午 -->
  8. <!-- 第3个tbody -->
  9. <tbody>
  10. <tr>
  11. <td rowspan="3" class="period">下午</td>
  12. <td>音乐</td>
  13. <td>音乐</td>
  14. <td>体育</td>
  15. <td>体育</td>
  16. <td>体育</td>
  17. </tr>
  18. <tr>
  19. <td>美术</td>
  20. <td>美术</td>
  21. <td>美术</td>
  22. <td>美术</td>
  23. <td>美术</td>
  24. </tr>
  25. <tr>
  26. <td>科学</td>
  27. <td>科学</td>
  28. <td>科学</td>
  29. <td>科学</td>
  30. <td>科学</td>
  31. </tr>
  32. </tbody>
  33. <!-- 表尾 -->
  34. <tfoot>
  35. <tr>
  36. <td>备注:</td>
  37. <td colspan="5">每天下午15:30-17:30在校写作业</td>
  38. </tr>
  39. </tfoot>
  40. </table>

</body>
</html>
···

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