05. Document Flow

Web page has multiple layers, CSS can set style for each layer, only the content and style on the top layer could be visualized for users. The bottom layer is called document flow, all the elements are aligned in document flow by default.

Only two state for elements, in document flow or not.

The characters of document flow:

• block elements

  • block element occupy a single line
  • The default width is the width of parent element
  • The default width depends on width of content

• inline elements

  • inline element only occupy itself size
  • the content is aligned from left to right, and will swidth to the next line if line is not enough for them.
  • The default width and hight depends on the content.