From 1ac6c685a1592908490abaa07bf6b3ce3c7922eb Mon Sep 17 00:00:00 2001
From: Jet Hughes <jethughes0@gmail.com>
Date: Mon, 24 Oct 2022 18:33:10 +1300
Subject: [PATCH] vault backup: 2022-10-24 18:33:10

---
 content/notes/css.md        | 41 +++++++++++++++++++++++++++++++++----
 content/notes/javascript.md |  7 +++++++
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/content/notes/css.md b/content/notes/css.md
index cefd21274..2c0c95a3a 100644
--- a/content/notes/css.md
+++ b/content/notes/css.md
@@ -78,12 +78,45 @@ ID > class > element.
 Margin Collapse: If two vertically adjcent elements have touching margins, the smaller of the two will collapse
 
 # Layout
-## Flexbox
-## Grid
-## Trad
+`display: <inside type> <outside type>`
+e.g., `display: inline flex`
+e.g., `display: inline grid`
+e.g., `display: block flex`
 
-# Positioning
+## Outside
+Block
+- Breaks onto new line
+- width and height respected
+- padding, margin, border will push other elements away
+- box will extend in inline direction to fill space
+- box will become as wide as its container
 
+Inline
+- box will not break onto new line
+- width and height will not apply
+- size of inline is the size of their content
+- padding, border, margins apply but only horizontal with push other elements
 
+Inline-Block
+- does not break onto new line but respects height and width, and vertical margin/padding/border
 
+## Inside
+Normal Flow
+- Using block and inline elements
+- Ensures readable content even with old browsers and weird devices
 
+Flexbox
+- One dimensional, either row or col
+- children become flex items
+![flex diagram](https://i.imgur.com/gpYlpyo.png)
+
+Grid
+- Better for two dimensions, both row and col
+
+## Positioning
+Types
+- static
+- relative
+- absolute
+- fixed
+- sticky
\ No newline at end of file
diff --git a/content/notes/javascript.md b/content/notes/javascript.md
index 752038924..cc15c4cf7 100644
--- a/content/notes/javascript.md
+++ b/content/notes/javascript.md
@@ -5,4 +5,11 @@ tags:
 - cosc203
 ---
 
+A scripting language to dynamically control websites.
 
+# HTML DOM
+(Document object model)
+- JS can access and alter HTML elements
+- When a page loads it creates the DOM as a tree of objects
+
+# Async