# Units
There are two types of lengths that can be found in CSS: absolute & relative. It's important to know the difference between then in order to understand how big things will become.
# Absolutes units
The absolute length units aren't relative to anything else. That means that they will be the same regardless of screen size.
px is the most widely used measurement unit. A pixel doesn't actually correlate to a physical pixel on your screen.
Anothers absolute length units include:
| Unit | Name |
|---|---|
| cm | Centimeters |
| mm | Millimeters |
| pt | Points |
| pc | Picas |
| in | Inches |
| Q | Quarter-millimeters |
# Relatives units
Relative length units don’t have fixed values. Their values are relative to another value or feature (height, font-size, width). Relative units are more useful in web design because with them it's easy to properly size elements.
| Unit | Relative to |
|---|---|
| em | the width of a capital letter M of the font-size of the current element. |
| rem | the “root” element (:root {}) rather than using the cascade, like em does |
| vw | the viewport width, it represents a percentage of the viewport width. 25vw means 25% of the viewport width. |
| vh | the viewport height, it represents a percentage of the viewport height. 75vh means 75% of the viewport height. |
| vmin | it represents a percentage of the viewport's smaller dimension. |
| vmax | it represents a percentage of the viewport's larger dimension. |
# Percentages
Percentages are another useful measure, they let you specify values in percentages of that parent element’s corresponding property
.container {
height: 600px;
}
.child {
height: 75%; /* = 450px */
}