Flow Layout

CSS takes a source document organized as a tree of elements (which can contain a mix of other elements and text nodes) and text nodes (which can contain text), and renders it onto a canvas such as your screen, a piece of paper, or an audio stream.

–CSS Display Module Level 4

Box Generation:

  1. Inspect box tree with elements and text nodes
  2. Each box has four areas: content, padding, border, & margin
  3. Four edges: content-box, padding-box, border-box, margin-box
  4. Content flows to fit parent box
  5. HTML box is inside Viewport
  6. Display:none; removes box & subtree
  7. Display:contents; removes box
  8. Display:list-item; generates a second ::marker box
  9. List-style-position moves marker in or out of primary box