There are mainly five different types of CSS Units Practically used.

1. rem

rem units are relational to the font-size value of the HTML tag.

For example, if the font size of the HTML tag is 16px (that is the default size for an HTML document), then 1rem unit is equal to 16px. That makes 5rem=80px, 2rem=32px, etc.

2. em

em units are similar to rem units, but whereas a rem unit always references the HTML tag, an em unit is relational only to its nearest defined parent element.

For example, if the div wrapper for a callout is set to font-size:20px, then any child element set to 1em would be the equivalent of 20px, 5em=100px, 2em=40px, etc.

3. vw & vh

The vw (view-width) and vh (view-height) units are relational to the viewport size, where 100vw or vh is 100% of the viewport's width/height.

For example, if a viewport is 1600px wide, and you specify something as being 2vw, that will be the equivalent of 2% of the viewport width, or 32px.

4. %

Relative to the value of the parent element. 100% is the width of the parent element.

5. px

Pixels are defined as a single point in a graphic image and are often tied to viewport resolution.

If a viewport is 1600x900, that typically means that there are 1600px pixel columns & 900px rows, with a pixel in each cell.