Community Learn Tools Library Leisure
search
English
Home > List of blog posts > css常用单位em,rem
Blogger Information
Blog 14
fans 0
comment 0
visits 7647
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
css常用单位em,rem
深巷的博客
Original
741 people have browsed it

css常用单位em,rem

1.特点

单位 特点 推荐场景
em 继承字号,受自身和祖先影响 PC端
rem 根字号, 字号常量不变, 不受父元素影响 移动端

2.示例

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>表格中常用的样式</title>
  9.     <style>
  10.         /* 1. 添加表格线: 一定要添加到单元格中 td , th */
  11.         table td,
  12.         table th {
  13.             font-size: 1rem;
  14.             border: 0.0625rem solid #000;
  15.         }
  17.         /* 2. 折叠表格线: table */
  18.         table {
  19.             border-collapse: collapse;
  20.         }
  22.         /* 3. 对表格进行一些布局设置 */
  23.         table {
  24.             width: 90vw;
  25.             /* margin-left: auto;
  26.         margin-right: auto;
  27.         margin: auto auto; */
  28.             /* 块级元素在父级中的居中 */
  29.             margin: auto;
  30.             /* 文本水平居中 */
  31.             text-align: center;
  32.         }
  34.         /* 标题 */
  35.         table caption {
  36.             font-size: 1.2rem;
  37.             margin-bottom: 0.72rem;
  38.         }
  40.         table thead {
  41.             background-color: lightcyan;
  42.         }
  44.         /* table tbody .period {
  45.         background-color: lightgreen;
  46.       } */
  48.         /* table tbody tr:first-of-type td:first-of-type { */
  50.         /* 第二个tbody应该去掉,作用:not 取反的伪类 */
  51.         table tbody:not(tbody:nth-of-type(2)) tr:first-of-type td:first-of-type {
  52.             background-color: lightgreen;
  53.         }
  54.     </style>
  55. </head>
  57. <body>
  58.     <table>
  59.         <caption>
  60.             合肥市同安小学五年级课程表
  61.         </caption>
  62.         <thead>
  63.             <tr>
  64.                 <th>时间</th>
  65.                 <th>周一</th>
  66.                 <th>周二</th>
  67.                 <th>周三</th>
  68.                 <th>周四</th>
  69.                 <th>周五</th>
  70.             </tr>
  71.         </thead>
  72.         <!-- 上午 -->
  73.         <!-- 第一个tbody  -->
  74.         <tbody>
  75.             <tr>
  76.                 <td rowspan="4" class="period">上午</td>
  77.                 <td>数学</td>
  78.                 <td>数学</td>
  79.                 <td>数学</td>
  80.                 <td>数学</td>
  81.                 <td>数学</td>
  82.             </tr>
  83.             <tr>
  84.                 <td>数学</td>
  85.                 <td>数学</td>
  86.                 <td>数学</td>
  87.                 <td>数学</td>
  88.                 <td>数学</td>
  89.             </tr>
  90.             <tr>
  91.                 <td>语文</td>
  92.                 <td>语文</td>
  93.                 <td>语文</td>
  94.                 <td>语文</td>
  95.                 <td>语文</td>
  96.             </tr>
  97.             <tr>
  98.                 <td>英语</td>
  99.                 <td>英语</td>
  100.                 <td>英语</td>
  101.                 <td>英语</td>
  102.                 <td>英语</td>
  103.             </tr>
  104.         </tbody>
  105.         <!-- 中午 -->
  107.         <!-- 第二个tbody  -->
  108.         <tbody>
  109.             <tr>
  110.                 <td colspan="6">中午休息</td>
  111.             </tr>
  112.         </tbody>
  113.         <!-- 下午 -->
  114.         <!-- 第3个tbody  -->
  115.         <tbody>
  116.             <tr>
  117.                 <td rowspan="3" class="period">下午</td>
  118.                 <td>音乐</td>
  119.                 <td>音乐</td>
  120.                 <td>体育</td>
  121.                 <td>体育</td>
  122.                 <td>体育</td>
  123.             </tr>
  124.             <tr>
  125.                 <td>美术</td>
  126.                 <td>美术</td>
  127.                 <td>美术</td>
  128.                 <td>美术</td>
  129.                 <td>美术</td>
  130.             </tr>
  131.             <tr>
  132.                 <td>科学</td>
  133.                 <td>科学</td>
  134.                 <td>科学</td>
  135.                 <td>科学</td>
  136.                 <td>科学</td>
  137.             </tr>
  138.         </tbody>
  139.         <!-- 表尾 -->
  140.         <tfoot>
  141.             <tr>
  142.                 <td>备注:</td>
  143.                 <td colspan="5">每天下午15:30-17:30在校写作业</td>
  144.             </tr>
  145.         </tfoot>
  146.     </table>
  147. </body>
  149. </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