search

博客列表 >em及rem单位的原理及其应用

em及rem单位的原理及其应用

手机用户1580651468
手机用户1580651468原创
2022年10月27日 21:46:01388浏览

em及rem单位的原理及其应用

一. em,rem的原理应用及优缺点

1.em和rem是相对单位，使用 em 和 rem 单位可以让我们的设计更加灵活，能够控制元素整体放大缩小，而不是固定大小。 我们可以使用这种灵活性，使我们在开发期间，能更加快速灵活的调整，

2.允许浏览器用户调整浏览器大小来达到最佳体验。Em 和 rem 单位提供的这种灵活性和工作方式都很相似。

3.em和rem的区别一句话概括：em相对于父元素，rem相对于html根元素

4.应用场景：

  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.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">box</div>
  13.       <style>
  14.         * {
  15.           margin: 0;
  16.           padding: 0;
  17.           box-sizing: border-box;
  18.         }
  19.         .container {
  20.           width: 400px;
  21.           height: 300;
  22.           border: 1px solid #000;
  23.           background-color: lightcyan;
  24.           /* 1.px:像素（设备相关） */
  25.         }
  26.         .container .item {
  27.           width: 160px;
  28.           height: 80px;
  29.           background-color: lightgreen;
  30.           /* px:优点（精确）,缺点：不灵活 */
  31.         }
  33.         /* 2.em：继承字号 */
  34.         .container .item {
  35.           /* 1em=浏览器默认字号=html.font-size =16px */
  36.           /* 160px = 10 *1em =10 em */
  37.           width: 10em;
  38.           height: 5em;
  39.           background-color: lightskyblue;
  40.         }
  41.       </style>
  42.     </div>
  43.   </body>
  44. </html>

运行效果

二. (选做) 使用rem + vw 重写 课程表 案例, css中不允许出现px,试试看

1.html的代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.   </head>
  9.   <body>
  10.     <table>
  11.       <caption>
  12.         重庆职教中心课程表
  13.       </caption>
  14.       <thead>
  15.         <tr>
  16.           <th>时间</th>
  17.           <th>周一</th>
  18.           <th>周二</th>
  19.           <th>周三</th>
  20.           <th>周四</th>
  21.           <th>周五</th>
  22.         </tr>
  23.       </thead>
  24.       <!-- 上午 -->
  25.       <!-- 第一个tbody  -->
  26.       <tbody>
  27.         <tr>
  28.           <td rowspan="4" class="period">上午</td>
  29.           <td>数学</td>
  30.           <td>数学</td>
  31.           <td>专业</td>
  32.           <td>专业</td>
  33.           <td>数学</td>
  34.         </tr>
  35.         <tr>
  36.           <td>数学</td>
  37.           <td>数学</td>
  38.           <td>专业</td>
  39.           <td>专业</td>
  40.           <td>数学</td>
  41.         </tr>
  42.         <tr>
  43.           <td>语文</td>
  44.           <td>语文</td>
  45.           <td>专业</td>
  46.           <td>专业</td>
  47.           <td>语文</td>
  48.         </tr>
  49.         <tr>
  50.           <td>英语</td>
  51.           <td>英语</td>
  52.           <td>专业</td>
  53.           <td>专业</td>
  54.           <td>英语</td>
  55.         </tr>
  56.       </tbody>
  57.       <!-- 中午 -->
  59.       <!-- 第二个tbody  -->
  60.       <tbody>
  61.         <tr>
  62.           <td colspan="6">午休</td>
  63.         </tr>
  64.       </tbody>
  65.       <!-- 下午 -->
  66.       <!-- 第3个tbody  -->
  67.       <tbody>
  68.         <tr>
  69.           <td rowspan="3" class="period">下午</td>
  70.           <td>音乐</td>
  71.           <td>音乐</td>
  72.           <td>体育</td>
  73.           <td>体育</td>
  74.           <td>体育</td>
  75.         </tr>
  76.         <tr>
  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.       </tbody>
  91.       <!-- 晚自习-->
  92.       <!-- 第4个tbody  -->
  93.       <tbody>
  94.         <tr>
  95.           <td colspan="6">课外活动</td>
  96.         </tr>
  97.       </tbody>
  98.       <tbody>
  99.         <tr>
  100.           <td rowspan="3" class="period">晚自习</td>
  101.           <td>音乐</td>
  102.           <td>音乐</td>
  103.           <td>体育</td>
  104.           <td>体育</td>
  105.           <td>体育</td>
  106.         </tr>
  107.         <tr>
  108.           <td>美术</td>
  109.           <td>美术</td>
  110.           <td>美术</td>
  111.           <td>美术</td>
  112.           <td>美术</td>
  113.         </tr>
  114.         <tr>
  115.           <td>自习</td>
  116.           <td>自习</td>
  117.           <td>自习</td>
  118.           <td>自习</td>
  119.           <td>自习</td>
  120.         </tr>
  121.       </tbody>
  122.       <!-- 表尾 -->
  123.       <tfoot>
  124.         <tr>
  125.           <td>备注:</td>
  126.           <td colspan="5">最后一节课写作业</td>
  127.         </tr>
  128.       </tfoot>
  129.     </table>
  130.   </body>
  131. </html>

2.样式的代码：

  1. <style>
  2.       /* 1. 添加表格线: 一定要添加到单元格中 td , th */
  3.       table td,
  4.       table th {
  5.         border: 1px solid #000;
  6.       }
  8.       /* 2. 折叠表格线: table */
  9.       table {
  10.         border-collapse: collapse;
  11.       }
  13.       /* 3. 对表格进行一些布局设置 */
  14.       table {
  15.         width: 90%;
  16.         /* margin-left: auto;
  17.         margin-right: auto;
  18.         margin: auto auto; */
  19.         /* 块级元素在父级中的居中 */
  20.         margin: auto;
  21.         /* 文本水平居中 */
  22.         text-align: center;
  23.       }
  25.       /* 标题 */
  26.       table caption {
  27.         font-size: 1.2em;
  28.         margin-bottom: 0.6em;
  29.       }
  31.       table thead {
  32.         background-color: lightcyan;
  33.       }
  35.       /* table tbody .period {
  36.         background-color: lightgreen;
  37.       } */
  39.       /* table tbody tr:first-of-type td:first-of-type { */
  41.       /* 第二个tbody应该去掉,作用:not 取反的伪类 */
  42.       table
  43.         tbody:not(tbody:nth-of-type(2), tbody:nth-of-type(4))
  44.         tr:first-of-type
  45.         td:first-of-type {
  46.         background-color: lightcoral;
  47.       }
  48.     </style>

运行效果图：

上一条：flex容器的常用属性及其使用案例下一条：1021 实例演示表单中常用的"状态伪类",盒模型的五个核心属性,并描述padding,margin的简记规则
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多