CSS series: The relationship between boxes in CSS

1. Standard document Flow

Standard document flow is the collation of various elements when values are not used in other special CSS rules related to the arrangement and positioning of rain.

1.1 Block level elements

Block-level elements will not be in the same row, always in the form of a block, and with the same class of block-level elements arranged vertically, left and right full.

1.2 In-line elements (inline)

The inline element itself does not occupy a separate area, and only indicates a certain range based on the other elements.

The inline element is also a node in the DOM tree, and from the DOM's point of view, there is no difference between the block-level element and the inline element, which is a node on the tree, and from a CSS perspective, the difference is that the block-level element has its own area, and the inline element does not.

A DIV is a block-level element that wraps around a line of elements. Span is an in-line element that does not wrap around it.

2. The positioning principle of the box in the standard document flow

The horizontal margin between the elements in the row, and the value margin between the block-level elements.

CSS series: The relationship between boxes in CSS