CSS中的常见单位(px,%,em,rem,vw,vh,vmax,vmin,calc)

像素(px)&百分比(%)

像素(Pixel)

  • 长度单位,相对于显示器屏幕分辨率而言,通常在不定义显示缩放比例的情况下,1px对应显示器屏幕上的一个像素点。
  • 早年的pc端展示的页面基本都用这个单位。

百分比(%)

  • 相对长度单位,指占用的父元素宽度/高度的比例。

  • 当指定为100%时,会占据父元素的全部宽度或高度;也可以指定大于100%的数值,这时,子元素会超出父元素的边界。

EM&REM

这两个都是相对长度单位。区别在于

  • EM是相对于父元素
  • REM是相对于根元素。REM中的“R”就是ROOT的意思。页面中的根元素是指html标签。

现代浏览器通常默认字体大小是16px,所以rem/em的数值实际上都是16px的倍数。例如,当字体大小为16px时,有:
在这里插入图片描述

问题在于,当使用16px做为默认大小时,12px或10px这种数值使用rem/em来表示,会在计算和书写时比较麻烦。所以通常会在css的html选择器中将字体大小进行重置。

html{
    font-size: 62.5%;
}

也就是说现在默认字体大小不再是16px,而是16px*0.625=10px。这时,在使用rem/em时,就方便多了。此时的12px就是1.2rem, 10px就是1rem,计算和书写更加方便。
在这里插入图片描述

这里需要注意一点,虽然在html选择器和其他选择器中都定义了font-size属性,但是要注意区别

html {
    # 这里是重新设置根字体大小,其含义是16px*62.5%=10px,也就是说将根字体大小设置为10px;
    font-size: 62.5%;
}
.parent {
    # 这里是应用根设置的字体大小,20rem = 10px*20 = 200px
    width: 20rem;
    height: 20rem;
    # 指定字体大小是20px
    font-size: 2rem;
}

EM的缺点

  • 前面提到,EM是相对于父元素进行计算,所以当页面比较复杂时,计算EM,也就会变的复杂。

  • 究其原因,是因为其所有字体大小都相对于父元素的大小决定的,当页面有多层嵌套时,同样是定义2rem/2em,实际显示的字体大小会不同。
    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        font-size: 62.5%;
      }
      .parent {
        width: 600px;
        height: 600px;
        background-color: lightblue;
      }
      .item_em_1,
      .item_em_2 {
        font-size: 2em;
        background-color: limegreen;
      }
      .item_rem_1,
      .item_rem_2 {
        font-size: 2rem;
        background-color: purple;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="item_em_1">
        EM_AA(这里EMREM自动大小相同)
        <div class="item_em_2">EM_BB(这里字体相对父元素明显变大)</div>
      </div>

      <div class="item_rem_1">
        REM_AA
        <div class="item_rem_2">REM_BB(这里字体与父元素相同)</div>
      </div>
    </div>
  </body>
</html>

所以在前端开发时,尽量不要使用EM!容易迷糊!

VW&VH

这两个单位都是相对于页面显示窗口的大小。

  • VW:视图宽度(Viewport Width),将页面显示窗口的宽度分成100份,每1vw是视图窗口宽度的1/100。
  • VH:视图高度(Viewport Height),将页面显示窗口的高度分成100份,每1vh是视图窗口高度的1/100。
    在这里插入图片描述

vmax&vmin

  • vmax:取当前vw,vh中的最大值
  • vmin:取当前vw,vh中的最小值
    在这里插入图片描述

计算

可在CSS中使用calc进行数值的计算

计算时,要注意±符号前后必须要有空格

calc(100vh - 10px)
calc(100vh - 10rem)
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值