search

博客列表 >em和rem的联系和区别

em和rem的联系和区别

手机用户1607314868
手机用户1607314868原创
2020年12月18日 03:24:502867浏览

em和rem的联系和区别

em和rem都是计量单位，都能表示尺寸，更适用于响应式布局但他们的用途不同！

em是什么？

浏览器默认的文本字号，通常是16px，也就是1em=16px
em的使用：设置响应式文本的字号。em有继承性，使用父元素的字号font-size的值

rem是定义字号使用的。

html是根元素，一个页面中它是唯一的且最大的包含块，所以在html中定义em的大小，可以看成一个常量。html的所有后代元素，想引用html中的字号，就不能用em！因为em有继承性！

两者区别：

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

em的使用
  1. <style>
  2.     /*
  3.     html是根元素，通常浏览器在html设置的字号是16px
  4.     如果想改变默认字号，则修改font-size的值
  5.     1em=font-size的值
  6.     */
  7.  html{
  8.      font-size:20px;
  9.  }
  10.     /*设置div的宽高em*/
  11.     div{
  12.     width=10em;/* 10em * 20 */
  13.     height=5em;/* 5em * 20 */
  14.     }
  15.     .test{
  16.         font-size:2em;/*em的继承性，则现在 1em=2*20px =40px */
  17.     }
  18.     /* 此时div的宽高就变成了 10em * 40  */
  19. </style>
  20. <body>
  21.     <div class="test"></div>
  22. </body>
rem的使用
  1. <style>
  2.  html{
  3.      /* 1.25 *16 = 20px*/
  4.      font-size:1.25em;
  5.  }
  6.     div{
  7.         /* rem是相对于html，不受外界影响*/
  8.         width:10rem; /* 10 * 20px */
  9.         height:5rem;
  10.     }
  11.     .test{
  12.         font-size:2rem;/* 2*20px=40px */
  13.     }
  14.     /* rem没有继承性只参照html。所以 宽高不变还是 10 * 20px */
  16. </style>
  17. <body>
  18.     <div class="test"></div>
  19. </body>

vh和vw

学习vh和vw之前先了解视口，视口就是可视窗口，就是浏览器窗口中用于显示文档的可视区域
vh:视口的 “初始包含块” 的高度的百分之一(1/100)
vw：视口的 “初始包含块” 的宽度的百分之一（1/100）
注：初始包含块：目前 可以简单的理解为 “html”
通俗讲就是将窗口划分宽高划分100份，

  1. <style>
  2.     /*
  3.     div占据窗口的宽高各50份。也就是一半
  4.     */
  5. .box{
  6.     width:50vw;
  7.     height:50vh;
  8.     background-color:red;
  9.     margin:auto;
  10. }
  11. </style>
  12. <body>
  13.     <div class="box"></div>
  14. </body>
上一条：CSS中em,rem,vw,vh应用及原理下一条：Markdown 简介及其对应 Html 常用标签语法初识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多