CSS Fundamentals

### 7 CSS layout modes - [more here by Josh Comeau](https://www.joshwcomeau.com/css/understanding-layout-algorithms/)

All layout modes can choose how to implement CSS properties. So some CSS properties work differently in each layout mode.

1. Flow (default, the original, basically for documents) - Inline, displays left to right. Blocks, go vertical. `inline-block` forces the content inside to the shape of a rectangle. `inline` allows text to wrap into separate partial lines. To get height to work, you need to set height on the parent element (perhaps `body`), since the height of the parent matters. It won't overflow its parent's height. `z-index` isn't implemented in the flow layout (since docs don't typically allow overlay). That's why you gotta add position or flexbox to make it work.
2. Positioned - Element's position is anchored to something else like `absolute` or `fixed`
3. Flex (flexbox) - `z-index` works the same as positioned layout does, so both can help with issues. Use `flex-basis` to specify the width rather than width/height. Why? Because it's not tied to a direction, so you don't have to change it when you change flex direction. And, it "wins" over width if both exist. `flex-basis` and `width` are more of a suggestion in flexbox. They're setting a theoretical width in ideal conditions with no constraints, not an absolute width.
4. Grid
5. Table
6. Float
7. Multi-column (via column property)

Remember z-index stacking context. A z-index applies to all it's children because it creates a stacking context. So even if a child has a high z-index, it can't overlay its parent's z-index.

[Josh Comeau's CSS reset](https://www.joshwcomeau.com/css/custom-css-reset/)

On px vs em/rem: If the value should increase with the default font size, use rem. Otherwise, use px. So, use em/rem for font-size, but use pixel for most other values like padding/margin/border. This way, when font size increases, the padding/margin/border don’t grow and take up more space (which would hinder readability by devoting too little space to the text). More: https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/

Easily use em:

```css
html {
--14px: 0.875rem;
--15px: 0.9375rem;
--16px: 1rem;
--17px: 1.0625rem;
--18px: 1.125rem;
--19px: 1.1875rem;
--20px: 1.25rem;
--21px: 1.3125rem;
}
h1 {
font-size: var(--21px);
}
```

## Animation

[autoanimate](https://auto-animate.formkit.com/#usage-react)