CSS document streams and block-level elements and inline Elements

Document Stream

The form is divided into rows from top to bottom, and the elements are discharged from left to right in each row, that is, the document stream.

Each non-floating block-level element occupies only one row, and the floating element floats at one end of the row as required. If the current row cannot accommodate it, a new row will be floated.

An inline element does not exclusive to a row. Almost all elements (including block-level, inner-join, and list elements) can generate child rows for placing child elements.

In three cases, elements are separated from the document stream, which are floating, absolute, and fixed. but the floating element in IE also exists in the Document Stream (which makes me think so reasonable & gt; <).

Floating elements do not occupy any normal Document Stream space, while the positioning of floating elements is based on the normal Document Stream, and then extract from the document stream and move it as far as possible to the left or right. The text content is surrounded by floating elements. When an element is extracted from a normal Document Stream, other elements in the Document Stream ignore this element and fill in its original space.

The root of the confusing concept of floating is the interpretation of the theory by the browser. It can only be said that many people use IE as the standard, but it is not.

Based on the document stream, we can easily understand the following positioning modes:

What does inline element mean? What is a block-level element.

The text in the CSS authoritative guide shows that any visible element that is not a block-level element is an inline element. Its performance is in the form of "Row layout", where "Row layout" means that its performance is always displayed in rows. For example, when we set an inline element border-bottom: 1px solid #000, it is represented by repeating each line, and there will be a black fine line under each line. If it is a block-level element, the displayed black line will only appear below the block.

Elements such as P, H1, or Div are often referred to as block-level elements, which are displayed as a piece of content; elements such as strong and span are called intra-row elements whose content is displayed in the row, that is, "line box ". (You can use display = block to convert an element in the row into a block element. Display = none indicates that the generated element does not have a box at all, nor does it show any element, and does not occupy space in the Document)

A: an element in a row can only be placed in a row. A block-level element is a four-square block that can be placed anywhere on the page.

B: To put it bluntly, an element in a row is like a word. A block-level element is like a paragraph. If it is not defined separately, it will appear on an independent line.

C: general block-level elements such as paragraphs <p> and titles

D: The block-level element-less feature is that each block-level element is displayed from a new line, and the subsequent element-less elements must be displayed in another line.

E: <span> the CSS definition belongs to an element in the row, and <div> is a block-level element.

Those who have learned CSS can understand it once they hear it. It is not easy for new users to understand. I am mainly familiar with new users!

Using the word container makes it easier to understand their existence and usage. The element in the row is equivalent to a small container, while <div> is equivalent to a large container, of course, a large container can be placed in a small container. <Span> it is a small container. You may have a preliminary impression in your mind. If we want to install some clear water in a large container. But I also want to install some ink in it. What should I do? It's easy. Don't we just take out the small container and mount it with ink and put it in the clear water of the large container.

Let me give you a simple example:

I want to use CSS to define the style of the letter C, so we can use <span>.

<W3C Standard <span> www.51ini.com <>

• Relative positioning,
  Offset relative to the position of the element in the Document Stream, but retain the original placeholder.
• Absolute positioning,
  That is, it is completely out of the document stream, and offset relative to the last parent element of the non-static value of the position attribute
• Fixed positioning,
  That is, it is completely out of the Document Stream, which is offset relative to the video area.