CSS positioning mechanism: Common stream

Original. Original article: http://www.swordair.com/blog/2010/08/#, download for record.

As I did not find a Chinese article that I thought was complete about normal streams, float and absolute positioning, I took the courage to write an article by myself. Therefore, the 8 Box model in CSS2.1 and the 9 Visual formatting model are roughly lost. To be honest, it looks a little big ~

Document Stream, in fact, the standard reagan does not have this word. If the document flow is translated into English, it is document flow, but there is only one word in the standard, which is called normal flow or conventional flow. But it seems that people are more accustomed to the name of the Document Stream, because many Chinese translation books come in this way. For example, in CSS Mastery, only normal flow is used in the beginning and end of the original English book, and document flow has never been seen. However, the Chinese translation "normal stream" and "Document Stream" appear alternately.

What is a normal stream? Simply put, elements are arranged according to their location order in HTML. This process follows standard descriptions.

To explain from different perspectives, I have collected some definitions that may be lengthy, specific, or obscure:

• Divides the form from top to bottom into one row, and emits elements from left to right in each row, that is, the document stream.
• Jennifer.Kyrnin@About.com: A normal stream is the way elements are rendered on web pages in most cases. All HTML objects are in block boxes (block-level elements) or inline boxes (intra-row elements.
• Rainbo Design: When the browser starts rendering the HTML document, it starts from the top of the window and passes through the entire document content process to allocate the space required by the element. Unless the document size is limited by CSS, the browser vertically expands the document to accommodate all the content. Each new block-level element is rendered as a new row. The elements in the row are horizontally rendered in order until the current row encounters a boundary and then switched to the next vertical rendering line. This process becomes a normal document stream.

It can be seen that the flow can be fully understood as a process. A normal stream is the process of arranging and locating elements.

But in CSS2.1RC, the essence of a normal stream is one of the three Positioning schemes, which is defined:

Reference:

Normal flow. In CSS 2.1, normal flow events des block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.

This process includes block formatting, inline formatting, relative positioning, and running-in boxes positioning. It seems very different from those above, but it is still the same to separate them.

In addition, there is another section in 9.4 Normal flow:

Reference:

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. block boxes maid in a block formatting context. inline boxes maid in an inline formatting context.

This is a segment description, not a definition. The Box in a normal stream belongs to a formatting context. The type can be block or inline, but not both. In addition, Block boxes are formatted in block formatting context, while Inline boxes is formatted in inline formatting context.

We know that any rendered element belongs to a box and is either block or inline. Even text without any element package will belong to anonymous block boxes or inline boxes according to different situations. Therefore, the preceding description divides all elements into the corresponding formatting context.

For more information, click the next page!

• Three pages in total:
• Previous Page
• 1
• 2
• 3
• Next Page