search

博客列表 >深刻理解：em,rem,px 的使用场景,区别与联系

深刻理解：em,rem,px 的使用场景,区别与联系

黑色郁金香
黑色郁金香原创
2020年10月27日 00:49:561311浏览

一、px、em、rem 的概念及其之间的区别

在 css 中的单位长度使用中，比较常用的是 px、em、rem，三个单位的概念和区别是：px 是绝对值，em 与 rem 都是相对值

代码小案例：

  1.       <style>
  2.         :root{
  3.             /* 定义了一个根元素值 */
  4.             font-size: 1em;
  5.         }
  6.         .px{
  7.             font-size: 16px;
  8.             width: 200px;
  9.             height: 200px;
  10.             border: 1px solid red;
  11.         }
  12.         .em{
  13.             /* 字号被修改，新的值成为父级新值 */
  14.             font-size: 1.25em;
  15.             width: 15em;
  16.             height: 15em;
  17.             border: 1px solid blue;
  18.         }
  19.         .rem{
  20.             /* 字号取决于根元素的值 */
  21.             font-size: 1rem;
  22.             width: 20rem;
  23.             height: 20rem;
  24.             border: 1px solid springgreen;
  25.         }
  26.     </style>
  27. </head>
  28. <body>
  29.     <div class="container">
  30.         <div class="px">px绝对尺寸</div>
  31.         <div class="em">em相对尺寸</div>
  32.         <div class="rem">rem相对尺寸</div>
  33.     </div>

实例图

标准模式

1. px：px 是固定像素单位，设置以后，在页面发生改变时，无法适应页面而去改变值的大小

2. em: em 相对于父元素，是相对父级元素字体大小的倍数

例如，父级 div 中字体设置了 12px， 在设置 2em 之后，该元素的字体大小就变成了 24px

3. rem: rem 相对于根元素(html)，是相对 html 根元素字体大小的倍数

例如， html 默认的字体大小是 16px。所以，1rem 就相当于 16px。rem 的值最终取决于根元素默认值，其值是可以设置的

em 与 rem 的区分

em 相对于父元素，rem 相对于根元素(html)

总结：

  • px、em、rem 作为绝对尺寸和相对尺寸，其核心体现在所选择的参照物本身

二、vh,vw 写一个页面布局案例，欢迎大家指正

代码部分

  1. <style>
  2.     * {
  3.       margin: 0;
  4.       padding: 0;
  5.     }
  6.     .header  {
  7.       width: 100vw;
  8.       height: 10vh;
  9.       background-color: cornflowerblue;
  10.       line-height:10vh;
  11.       text-align:center;
  12.       position: relative;
  13.       font-size: 2rem;
  14.       justify-content: center;
  15.       display: flex;
  16.     }
  18.     .main {
  19.       float: left;
  20.       width: 100vw;
  21.       height: 70vh;
  22.       background: rgb(36, 221, 19);
  23.       line-height:70vh;
  24.       text-align:center;
  25.       font-size: 2rem;
  26.       justify-content: center;
  27.       display: flex;
  28.     }
  30.     .footer {
  31.       float: left;
  32.       width: 100vw;
  33.       height: 20vh;
  34.       background: rgb(221, 19, 194);
  35.       line-height:20vh;
  36.       text-align:center;
  37.       font-size: 2rem;
  38.       justify-content: center;
  39.       display: flex;
  40.     }
  41.   </style>

效果演示

标准模式

上一条：em，rem px 的运用场景，em和rem的区别下一条：布局中的BFC作用和Flex容器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多