Matters needing attention

  1. Must use Chinese symbol, otherwise the browser will warn
  2. Case sensitive

Document Flow (Normal flow)

  1. The element’s normal flow direction
  2. Inline elements are as follows<span>Distribution from left to right, to the rightmost line wrap (an element may be split into two lines above and below)
  3. Block level elements such as<div>Distributed from top to bottom, each block-level element is on a row (on a row anyway)
  4. throughdisplayProperty to change the type of an element (whether block-level or inline or inline-block)
  5. Inline-block elements are distributed from left to right, but each element is always intact, that is, not split into two rows above and below

The width of the

  1. The width of an inline element is determined by the total width of the inline elements within it. You cannot style the width!
  2. The default width of block-level elements is auto, not 100%, which can be set to width
  3. Try not to write width 100%
  4. The width of an inline-block element<span>Same, but you can set width

highly

  1. <span>Is determined by line-height,<span>The visible height and the actual height are not the same! Unable to set height
  2. <div>The height of the document flow element is determined by its internal normal flow element (document flow element), which encloses all document flow elements within the document flow element. The height can be set

Overflow (not applicable to inline elements)

When the height of the document flow elements inside the container is greater than the height of the container, Overflow for Scroll forever display overflow for auto Automatically select the appropriate time to display the scroll bar overflow for Visible display the overflow state directly by default

The box model

  1. A box can be divided into margin, border, padding, and content
  2. Width is simply the width of the content, which is content-box
  3. Width indicates the total width of border and content, which is border-box
  4. Same height!

Margin overlap

  1. The top and bottom margins of child elements overlap, not superimpose
  2. The top and bottom margins of the parent element and the first and last elements overlap, not superimpose
  3. The left and right margins do not overlap