The CSS document flow

Document flow, document flow, flow is its greatest feature: adaptive.

So what is document flow? As the name suggests: like water, when poured into a container, will automatically fill the container. This is the nature of CSS document flows.

A document flow has two important conceptual elements: inline and block, and their corresponding labels are SPAN and div. (Another is inline-block, which is a combination of the first two.)

So what’s the difference between these two elements? Inline elements are arranged horizontally by default. Blocks fill the screen by default. You can say that an inline element is like a bag with water in it (the width of the bag changes with how much water is in it). The block element is like a bottle of water (the width of the bottle is the entire screen by default). No matter how much water is in your bottle, it takes up the entire screen.) .

Keep in mind that the default width of these elements is not 100%, but width: auto, and their margin, border, and padding are automatically allocated

Therefore, it is recommended not to write width: 100%. Why not? That’s because once you add a width attribute to an element, it loses document flow. Even width:100% will be lost.

Once we set a fixed width, it evaluates according to the CSS box model and loses the fluidity of the document flow: automatic allocation of space.

Their widths are specified as follows:

  • The width of an inline element is internal inline and (without block elements) and cannot be specified by width
  • Block automatically calculates the width by default, specified by width
  • Inline-block elements combine the properties of the first two elements and use width

At height, the water is much deeper. Without going into too much detail here, you can just remember the following rules:

  • Inline height is determined indirectly by line-height, regardless of height
  • The block height is determined by the internal document flow element (since elements out of the document flow do not count). You can set height
  • Inline-block is similar to block in that you can set height

“Abnormal” condition:

1. What happens when you write a SPAN or div without any content inside?

The results are as follows:

As you can see from the figure above, the SPAN element (inline element) has a height! , so what we can prove is that its height is determined by line-height.

2. Overflow problem

This is what happens when I set a fixed height for a div (block element) and the content goes beyond that height

So what’s the solution? With the overflow

  • overflow:hidden Just hide the extra content
  • overflow:auto When it does not exceed, it will be displayed normally, and when it exceeds, the scroll bar will appear
  • overflow:scroll Do not recommend using, have auto ok? It has all the functions of Auto.
  • I won’t try the other attributes.

Out of document flow

The height of the block is determined by the internal document flow. You can set height, which means that some elements are not in the document flow.

What elements can be left out of the document flow?

  • Set the float
  • Set the position: absolute/fixed