mirror of https://github.com/rjbasitali/tutorials
120 lines
4.7 KiB
Markdown
120 lines
4.7 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?
|
|
|
|
1. Which properties can you use in connection with these units?
|
|
2. How is the size calculated?
|
|
3. 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 & `%`
|
|
|
|
If an element has `position` property assigned `fixed` value, than the containing block of that element will be the **Viewport**. So the percentage `%` value of the element will be relative to the viewport's dimensions.
|
|
|
|
|
|
## Rules to Remember `absolute` Positioning & `%`
|
|
|
|
If an element has `position` property assigned `absolute` value, than the containing block of that element will be an **Ancestor**. In this case, the percentage `%` value of the element will be relative to it's ancestor's **content + padding**.
|
|
|
|
But the question is, what is the containing block or ancestor for this element, and the answer is, the closest ancestor with any of these properties applid: `position: absolute;`, `position: relative;`, `position: fixed;` or `position: sticky;`. Or the closest ancestor which is not positioned `static`.
|
|
|
|
|
|
## Rules to Remember `static` Or `relative` Positioning & `%`
|
|
|
|
With position `static` or `relative`, the containing block would still be an **Ancestor**, but the % value of the element will only be relative to the ancestor's **content** and not `padding`.
|
|
|
|
The ancestor for a `static` or `relative` positioned elements will be the closest `block` level element.
|
|
|
|
|
|
## Using `min-width/height` And `max-width/height`
|
|
|
|
To restrict the minimum or maximum size of the elements. e.g. the following rule will make the element have `65%` width of the containing block, unless it is larger than `500px` pixels, in that case it will not grow larger than that.
|
|
|
|
```css
|
|
.image {
|
|
width: 65%;
|
|
max-width: 500px;
|
|
}
|
|
```
|
|
|
|
|
|
## Working With `rem` And `em`
|
|
|
|
`rem` and `em` are relative units which are calculated based on the font size inherited from a container or browser. e.g setting a `font-size: 20px` for a continer and `font-size: 2em` for an element in that container will make that element have `font-size` `40px` in pixels, because `2em` means 2 times the size inherited.
|
|
|
|
The issue with `em` is it multiplies the `font-size` everytime there's a `font-size` defined in it's chain of inheritance.
|
|
|
|
To avoid the issue with the `em` unit, we can use `rem`, which only multiplies it with the `font-size` defined in the root element of our website, that is the `html` element.
|
|
|
|
|
|
## Adding `rem` To Additional Properties
|
|
|
|
We can apply the `rem` unit to other elements or as `margin` and `padding`, e.g. we can set `margin-top: 2rem;`, but keep in mind that the margin will increase or decrease with the change in `font-size`.
|
|
|
|
|
|
## Understanding the Viewport Units `vh` And `vw`
|
|
|
|
The viewport units allows us the set our sized relative to the actual *Viewport* size. e.g. `width: 80vw;` will set the element's width to 80 percent of the viewports actual width.
|
|
|
|
Another units that set the sizes relative to viewport's actual size are `vmin` and `vmax`, which selects the minimum or maximum value from viewport's width and height.
|
|
|
|
|
|
## Choosing The Right Unit
|
|
|
|
The following list for choosing the right unit for a property, is not a definit guide, but a preference of an experienced developer:
|
|
|
|
| Property | "Recommended" Unit |
|
|
| --- | --- |
|
|
| `font-size` (root element) | `%` |
|
|
| `font-size` | `rem` |
|
|
| `padding` & `margin` | `rem` |
|
|
| `border` | `px` |
|
|
| `width` & `height` | `%,` `vw`, `vh` |
|
|
| `top` & `bottom` | `%` |
|
|
| `left` & `right` | `%` |
|
|
|
|
|
|
## Using `auto` To Center Elements
|
|
|
|
As we have already seen, using the `margin: auto;` centers elements in it's container. `margin: auto;` only works for block level elements with an explicitly assigned `width` though.
|
|
|
|
|