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 */
  }

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

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

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

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

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

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

 

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

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

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

 

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

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

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

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

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