summaryrefslogtreecommitdiff
path: root/3 resources/CSS.md
diff options
context:
space:
mode:
Diffstat (limited to '3 resources/CSS.md')
-rw-r--r--3 resources/CSS.md28
1 files changed, 0 insertions, 28 deletions
diff --git a/3 resources/CSS.md b/3 resources/CSS.md
deleted file mode 100644
index 32a3113..0000000
--- a/3 resources/CSS.md
+++ /dev/null
@@ -1,28 +0,0 @@
-**Display**
-display none vs visibility hidden: display: none is really like the element does not exist. Visibility hidden just hides it but it still takes space.
-
-A display: none element can still have size and be coloured with a background image. It still doesn't take space. This can be used for a timeline bar for example!
-
-**Flexbox**
-Flexbox deals with layout always in only one dimension; it's possible to specify which dimension: either vertical or horizontal.
-
-Two axes: main and cross
-
-Control main axis: `flex-direction: row|row-reverse|column|column-reverse`. The first two make it a horizontal layout and the latter make it a vertical layout.
-
-Cross axis is always the opposite of `flex-direction`, so if `flex-direction: row-reverse` the cross axis is `column-reverse`.
-
-The writing mode determines where the start and end are, based on for example languages. Japanese is written from right-to-left rather than western left-to-right.
-So while in Europe the start of a flexbox is at the left and the end at the right in Japan this would be reversed.
-
-**Relationships**
-An important aspect of creating layouts with CSS is the relationships of elements with each other. For example parent/child relationships.
-
-If we change the width of a parent element; the height of all children increase. This happens because the total area of the parent remains the same.
-
-When the edge of a child aligns with its parent and we add a margin to the child; it pushes to the parent as well. This phenomenon is called ==collapsing margins==. It can be prevented by unaligning the edge(s) for example by adding padding or setting `display: flow-root;`.
-
-In `flexbox` siblings push against each other; if we add padding to one, it pushes against the other making it smaller. This does not happen in grid, where each cell gets a fixed size and the padding pushes against its own side.
-
-**Centering stuff**
-Use `margin-inline: auto;` -> this adds margins on both sides of the element. This can be used to center stuff on the page for example. \ No newline at end of file