1.px

Px pixel is a fixed unit size

2.em

Em is a unit of relative length related to the parent element and its own font size attribute (the default font size is 16px).

<div class="div1">
    <div class="div2"></div>
</div>
Copy the code
Div1 {height: 400px; // Set the font size for the element. width: 400px; font-size: 5px; } .div2{ width: 5em; height: 5em; font-size: 10px; Background-color: aquamarine; background-color: aquamarine; }Copy the code
Div1 {height: 400px; // The parent element is the size of the parent element if the parent element is not set. width: 400px; font-size: 5px; }. Div2 {width: 5em; height: 5em; background-color: aquamarine; }Copy the code

3.rem

Rem is also a unit of relative length, similar to EM except that it is associated only with the font-size attribute of HTML elements. Font-size: 14px “font-size: 14px”

Div1 {width: 10rem; // HTML elements with font size (default: 16px).div1{width: 10rem; height: 10rem; font-size=5px; Background-color: aquamarine; background-color: aquamarine; } html{ font-size: 20px; Div1 = height=200px,width=200px; }Copy the code

% 4.

% is also used to set the size of the element. If the current element is undefined position=absolute,fixed,% is used to set the size of the current element relative to the parent element.

<div class="div1">
    <div class="div2">
        <div class="div3"></div>
    </div>
</div>
Copy the code
Div1 = div1; div1 = div1; div1 = div1; // so div3 height=100px,width=100px. Div1 {width: 200px; height: 200px; position: absolute; background-color: aquamarine; } .div2{ width: 150px; height: 150px; background-color: coral; } .div3{ width: 50%; height: 50%; position: absolute; background-color: brown; }Copy the code
// Set position=fixed,% is used to set the current element's size relative to the visible window. Div1 {width: 200px; background-repeat: initial; background-repeat: initial; height: 200px; position: absolute; background-color: aquamarine; } .div2{ width: 150px; height: 150px; background-color: coral; } .div3{ width: 50%; height: 50%; position: fixed; background-color: brown; }Copy the code