简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS常用单位的特点及应用实例
Blogger Information
Blog 25
fans 0
comment 0
visits 13499
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常用单位的特点及应用实例
安超
Original
372 people have browsed it

1.CSS中常用的单位主要由:px、em、rem、vw、vx等

a.em 是继承字号，受自身和祖先的特征影响
b.rem 是根字号，主要决定于页面的font-size.是字号常量，不变。默认的font-size为16px
c. vw/vx 决定于视口的宽度。
1vw = 1/100(视口宽度 ,可用window.innerWidth获取)
1vh = 1/100(视口高度，可用window.innerHeight获取)

在使用中经常使用rem，原因在于其不收父级元素的印象，变化方便

2.rem及vw在表格中的应用

效果如图所示：
课程表
代码如下：

  1.  <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>表格的应用</title>
  8.     <style>
  9.         table th,
  10.         table td{
  11.             border: 1px solid black;
  12.         }
  13.         table{
  14.             border-collapse: collapse;
  15.             text-align: center;
  16.             width: 90vw;
  17.             margin: auto;
  18.         }
  19.         table th{
  20.             background-color:cadetblue;
  21.         }
  22.         table caption{
  23.             font-size: 1.5rem;
  24.             font-weight: bold;
  25.             margin-bottom: 1em;
  26.         }
  27.      /* 通过下面表格的伪类,将第一行和第六行取出来,设置背景颜色 */
  28.         table tbody tr:nth-of-type(5n+1) td:first-of-type{
  29.             background-color:chartreuse;
  30.         }
  31.     </style>
  32. </head>
  33. <body>
  34.     <table>
  35.         <caption>小学生课程表</caption>
  36.         <thead>
  37.             <tr>
  38.                 <th>时间</th>
  39.                 <th>周一</th>
  40.                 <th>周二</th>
  41.                 <th>周三</th>
  42.                 <th>周四</th>
  43.                 <th>周五</th>
  44.             </tr>
  45.         </thead>
  46.         <tbody>
  47.             <tr>
  48.                 <td rowspan="4">上午</td>
  49.                 <td>数学</td>
  50.                 <td>数学</td>
  51.                 <td>数学</td>
  52.                 <td>数学</td>
  53.                 <td>数学</td>
  54.             </tr>
  55.             <tr>
  57.                 <td>数学</td>
  58.                 <td>数学</td>
  59.                 <td>数学</td>
  60.                 <td>数学</td>
  61.                 <td>数学</td>
  62.             </tr>
  63.             <tr>
  65.                 <td>语文</td>
  66.                 <td>语文</td>
  67.                 <td>语文</td>
  68.                 <td>语文</td>
  69.                 <td>语文</td>
  70.             </tr>
  71.             <tr>
  73.                 <td>英语</td>
  74.                 <td>英语</td>
  75.                 <td>英语</td>
  76.                 <td>英语</td>
  77.                 <td>英语</td>
  78.             </tr>
  79.             <tr>
  80.                 <td colspan="6">中午休息</td>
  81.             </tr>
  82.             <tr>
  83.                 <td rowspan="3">音乐</td>
  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>
  106.         <tfoot>
  107.             <tr>
  108.                 <td>备注</td>
  109.                 <td colspan="5">每天下午13:30~15:30在学校做作业</td>
  110.             </tr>
  111.         </tfoot>
  112.     </table>
  113. </body>
  114. </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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！