CSS has lots of units for expressing the length and measurement. CSS units in which length is measured can be either absolute such as pixels, points and so on, or relative such as percentages (%) and em units.
Absolute Length:
It is not good for use on screen, cause screen size varies so much depending on the device used for that page it is recommended to use for print layout and where the output medium is known.
Absolute length units are as follows:
cm: centimeter
mm: milimeter
in: inches(1in = 96px = 2.54cm)
px: pixels (1px = 1/96th of 1in)
Pixels are a widely used measurement units. A pixel does not actually correlate to a physical pixel on your screen, as that varies, a lot, by the device (think high-DPI devices vs non-retina devices).
pt: points(1pt = 1/72 of 1in)
pc: picas(1pc = 12 pt)
Relative Length:
It is good for use on screen, if screen size varies so much depending on the device then these relative length units are perfect because it changes with the different rendering mediums.
Relative length units are as follows:
em
An em is equal to the computed font-size of that element’s parent. like, if there is a <div> element defined with font-size: 16px then for that <div> and for its children 1em = 16px.
ex
The ex unit is rarely used. Its purpose is to express sizes that must be related to the x(axis)-height of the current font.
rem
rem is the same as em, but instead of varying on the current element font size, it uses the root element (Html) font size. You set that font size once, and rem will be a consistent measure across all the page.
vw
vw is the viewport width represents a percentage of the viewport width. 30vw means 30% of the viewport width.
vh
vh is the viewport height represents a percentage of the viewport height. 20vh means 20% of the viewport height.
vmin
vmin is the viewport minimum unit represents the minimum between the height or width in terms of percentage. 20vmin is 20% of the current width or height, depending on which one is smaller.
vmax
vmax is the viewport maximum unit represents the maximum between the height or width in terms of percentage. 10vmax is 10% of the current width or height, depending on which one is bigger.
% (Relative to the parent element)
% unit adds the font-size relative to the current font-size.