CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)-Toy模板网

这篇具有很好参考价值的文章主要介绍了CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

此文内容较少，轻轻松松掌握，莫要有压力~

CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)

正如现实生活中长度具有mm、dm、cm、m等，在css中，也具备多种长度单位，本文对常用的几种单位进行详细举例介绍~

px：像素单位

初学css时，px单位经常被使用，此处按下不表~

em：表示相对于当前元素或父元素的font-size的倍数

<div>从前从前，有个人爱你很久</div>

  div {
    background-color: #ff8800c8;
    /* 由于自身元素无设置font-size，因此找到父元素html，默认font-size为16px */
    height: 10em; /* 相当于10*16=160px */
    width: 10em;  /* 相当于10*16=160px */
  }

CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)

rem：表示相对于根元素（html）的font-size的倍数

html {
    font-size: 10px;
}
div {
    background-color: #ff8800c8;
    height: 20rem; /* 相当于10*20=200px */
    width: 20rem;  /* 相当于10*20=200px */
}

CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)

%：表示相对其父元素对应属性的百分比

CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)

vw(viewport width)：视口宽度的百分比

<div class="box"></div>

.box {
  width: 50vw;
  height: 50vw;
  background-color: yellow;
}

CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)

可以实现随着窗口的宽度变化，引起box1的宽度、高度随之变化，但是一直会保持视口宽度的50%大小；

vh(viewport height)：视口高度的百分比

.box {
  width: 50vh;
  height: 50vh;
  background-color: yellow;
}

CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)

可以实现随着窗口的高度变化，引起box1的宽度、高度随之变化，但是一直会保持视口高度的50%大小；

vmax：视口宽度vw 或高度vh中较大者的百分比

vmin：视口宽度vw 或高度vh中较小者的百分比

.box {
  width: 50vmin;
  height: 50vmax;
  background-color: yellow;
}

宽将会视视口宽度或高度的最小值进行百分比设置，而高则会根据视口宽度或高度的最大值进行百分比设置

CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax) 文章来源地址https://www.toymoban.com/news/detail-490165.html

到了这里，关于CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

CSS查缺补漏之常用长度单位(px、em、rem、%、vw/vh、vmin/vmax)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2