A unit of absolute length:

Common: PX uncommon: cm, mm, in, PC, ptCopy the code

Unit of relative length:

Common: EM, REM, VW, VH Uncommon: ex, CH, LH, vmin, vmaxCopy the code

Em: Uses the font size relative to the parent element in font-size and the font size relative to itself in other attributes, such as width

Code demo:

<div class="grand">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>
Copy the code
.grand { font-size: 24px; width: 10em; /*240px*/ height: 10em; background: #000; }. Parent {font-size: 0.8em; / * 19.2 px (24 x0. 8) * / width: 5 em; / * 96 px (19.2 x 5) * / height: 5 em; background: #f00; }. Child {font-size: 0.8em; / * 15.36 px (19.2 x0.8) * / width: 4 em; / * 61.44 px (15.36 x15.36) * / height: 4 em; background: #0f0; }Copy the code

The result is shown below:

Font-size = em; font-size = em; This is not the case if the child does not set font size.

Code demo:

<div class="grand">
    <div class="parent">
        <div class="child"></div>
    </div>
</div>
Copy the code
.grand {
    font-size: 24px;
    width: 10em; /*240px*/
    height: 10em;
    background: #000;
}
.parent {
    width: 5em; /*120px(24x5)*/
    height: 5em;
    background: #f00;
}
.child {
    width: 4em; /*96px(24x4)*/
    height: 4em;
    background: #0f0;
}
Copy the code

The result is shown below:

Rem: The font size of the root element. The R in REM stands for root

The browser’s default font is 16px, 1rem. If an attribute of an element is set to 10rem, it translates to 160px

Vw: 1% of the window width

Vh: 1% of window height

Height :100vh theoretically equal to height:100%; But the nice thing is that if you set height to 100% when the element has no content, the element will not be stretched, but if you set height to 100vh, the element will be stretched at the same screen height