"Common length units (px, em, rem, %, vw/vh, vmin/vmax)" for CSS checking and filling

The content of this article is less, easy to master, don't be stressed~

Just as the lengths in real life have mm, dm, cm, m, etc., in css, there are also various length units. This article gives detailed examples of several commonly used units~

px: pixel unit

When learning css for the first time, the px unit is often used, and it is not shown here~

em: Indicates the multiple of font-size  relative to the current element or parent element

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

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

rem: Indicates the multiple of the font-size  relative to the root element (html)

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

%: Indicates the percentage relative to the corresponding attribute of its parent element

vw(viewport width): percentage of viewport width 

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

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

 

It can be realized that as the width of the window changes, the width and height of box1 will change accordingly, but it will always maintain 50% of the viewport width;

vh(viewport height): Percentage of viewport height

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

 

 It can be realized that as the height of the window changes, the width and height of box1 will change accordingly, but it will always maintain 50% of the height of the viewport;

vmax: Percentage of viewport width vw or height vh whichever is larger

vmin: Percentage of viewport width vw or height vh, whichever is smaller

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

Width will be set as a percentage of the minimum viewport width or height, and height will be set as a percentage of the maximum viewport width or height