chap8

css - the complete guide/8. sizes_and_units.md

@@ -6,18 +6,18 @@
 
 | Units | Sign |
 | --- | --- |
-| pixels | px |
-| percentages | % |
-| root em | rem |
-| em | em |
-| viewport height | vh |
-| viewport width | vw |
+| 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?
+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
 
@@ -45,5 +45,75 @@ Also, percentage `%` is another special unit used.
 To understand how `%` units are calculated, we first need to understand the concept of **containing blocks**.
 
 
-##  Rules to Remember Fixed Positioning & `%`
+##  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.
+