【温故而知新】px/em/rem/vh/vh/%的区别

2023-12-26 13:11:06

概念

px - 像素(Pixel)是屏幕上图像的最小单位,用于衡量屏幕上的细节大小。

em - em 是相对于父元素的字体大小的单位。当一个元素设置字体大小时,em 单位表示当前元素继承的父元素的字体大小的倍数。

rem - rem(root em)是相对于根元素(即 元素)字体大小的单位。它的计算方式与 em 类似,不同之处在于 rem 的参考基准是根元素的字体大小,因此不会受到继承关系的影响。

vh - vh 是视窗高度(Viewport Height)的单位,1 个 vh 表示视窗高度的 1%。

vw - vw 是视窗宽度(Viewport Width)的单位,1 个 vw 表示视窗宽度的 1%。

% - 百分比单位可以用于多种属性,如宽度、高度、边距等。它是相对于父元素的相应属性的百分比值。

案例

  1. px:
    • 区别:像素单位是绝对单位,表示屏幕上的物理像素。
    • 案例代码:
      .box {
        width: 200px;
        height: 150px;
        font-size: 16px;
      }
      
  2. em:
    • 区别:em 单位是相对于父元素的字体大小的倍数。
    • 案例代码:
      .parent {
        font-size: 20px;
      }
      
      .child {
        font-size: 1.2em;  /* 相当于 20px * 1.2 = 24px */
      }
      
  3. rem:
    • 区别:rem 单位是相对于根元素(即 元素)的字体大小的倍数。
    • 案例代码:
      html {
        font-size: 16px;
      }
      
      .box {
        font-size: 1.5rem;  /* 相当于 16px * 1.5 = 24px */
      }
      
  4. vh:
    • 区别:vh 是相对于视窗高度的百分比单位。
    • 案例代码:
      .box {
        height: 50vh;  /* 相当于视窗高度的 50% */
      }
      
  5. vw:
    • 区别:vw 是相对于视窗宽度的百分比单位。
    • 案例代码:
      .box {
        width: 50vw;  /* 相当于视窗宽度的 50% */
      }
      
  6. %:
    • 区别:百分比单位可以用于多种属性,相对于父元素的相应属性的百分比值。
    • 案例代码:
      .parent {
        width: 300px;
        height: 200px;
      }
      
      .child {
        width: 50%;  /* 相当于父元素宽度的 50% */
        height: 75%;  /* 相当于父元素高度的 75% */
      }
      

相关文章

【温故而知新】HTML回流和重绘
【温故而知新】Canvas详解及常见问题
【温故而知新】CSS预编语言
【温故而知新】CSS提高性能的方法都有那些
CSS的Grid布局与Flex布局

有疑问,请留言,或者进入社区一起谈论日常开发中,遇到的问题
扫码加入社区【猿区】
在这里插入图片描述

文章来源:https://blog.csdn.net/xuaner8786/article/details/135217608
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。