mirror of https://github.com/rjbasitali/tutorials
50 lines
1.2 KiB
Markdown
50 lines
1.2 KiB
Markdown
# Dimensions, Sizes And Units
|
|
|
|
## Where Unit Matters
|
|
|
|
### Pixels, Percentages & More
|
|
|
|
| Units | Sign |
|
|
| --- | --- |
|
|
| pixels | px |
|
|
| percentages | % |
|
|
| root em | rem |
|
|
| em | em |
|
|
| viewport height | vh |
|
|
| viewport width | vw |
|
|
|
|
### Some questions?
|
|
|
|
Which properties can you use in connection with these units?
|
|
How is the size calculated?
|
|
What's the right unit to choose?
|
|
|
|
### Where Units Matter
|
|
|
|
Keeping the CSS box model in mind, going inside out, e.g from content to padding to border to margin. Lets see where we can apply these units.
|
|
|
|
`font-size`, `padding`, `border`, `margin`, `width`, `height`, `top`, `bottom`, `left`, `right`.
|
|
|
|
|
|
## An Overview Of Available Sizes And Units
|
|
|
|
### How is the Size Calculated?
|
|
|
|
| **Absolute Lengths** | **Viewport Lengths** | **Font-Relative Lengths** |
|
|
| --- | --- | --- |
|
|
| Mostly ignore user settings | Adjust to current viewport | Adjust to default font size |
|
|
| `px` | `vh` | `rem` |
|
|
| `cm` | | `vw` | `em` |
|
|
| `mm` | | `vmin` | `...` |
|
|
| `...` | | `vmax` | |
|
|
|
|
Also, percentage `%` is another special unit used.
|
|
|
|
### How is the Box Size for % Units Calculated?
|
|
|
|
To understand how `%` units are calculated, we first need to understand the concept of **containing blocks**.
|
|
|
|
|
|
## Rules to Remember Fixed Positioning & `%`
|
|
|