Measurements

• CSS has several different units for expressing size
• There are two types of length units: absolute and relative.

Absolute Units

• Absolute units are fixed and will appear as exactly that size.
• Possible values are
  • mm: millimeter
  • cm: centimeter
  • in: inch - 1in = 2.54cm
  • pc: picas = 1/6 inch
  • pt: points = 1/72 inch
  • px: pixel = 1/96 inch
• Commonly used in web is pixels (px)

div {
	border: 5px solid blue;
}

Relative Units

• Relative units are relative to something
• Possible values are
  • %: percentage, relative to parent
  • vw, vh: viewport width, viewport height, relative to viewport
  • em, rem: relative to fontsize
• Relative values, eventually get converted to pixel values by the browser.
• With relative units. You can create layout that adjust to screen sizes.
• By default, the width of block level elements is 100% and their height is 0
• em, rem used in situations where we want to adjust the layout, according to the font size.

div {
	width: 50%
}

div {
	height: 100vh
	width: 100vw
}

100% of viewport height 100% of viewport width

div {
	width: 10em
}

default font size of html element is 16px; 10em - 10 times the font size - 10 x 16px

div {
	width: 10rem
}

rem font size of the root element

html {
	font-size: 62.5%
}

font-size: 10px