CSS document stream and css document

CSS document stream and css document

Many CSS books refer to the keyword "Document Stream" when talking about the CSS positioning mechanism. However, this word may not need to be explained simply by the author, so I seldom see specific explanations for this term. However, I think it is critical to understand this concept and to understand the entire positioning mechanism! I checked my understanding on the Internet, and then I went through W3C. The W3C statement can be used to summarize: "the position of an element is determined by the position of the element in (X) HTML ."

 

To better understand the above sentence, we can use exclusion. CSS has three Positioning Mechanisms: normal stream, float: left/right/none, and position: static/relative/absolute /).

 

A normal stream is a normal Document Stream. in HTML, the layout is from top to bottom and from left to right.

 

Example:

 

<Div id = "01"> </div> <div id = "02"> </div>

 

Obviously, this is the most common document stream, from left to right, one by one in the order of 01 first, 02 second, 03 finally arranged.

 

 

 

Once the FLOAT attribute or absolute location is performed on a DIV (static/relative is not included, the two documents are still normal), it is completely out of the Document Stream and does not occupy space.

 

Example:

 

 

For better identification, I will give 01 green, 02 gray, and 03 yellow respectively. Then, the 01 value is moved to the left. As a result, 01 is out of the Document Stream and does not occupy space at all. Therefore, 02 replaced the original position of 01 and the result 02 was covered by 01.

 

Similarly, absolute is positioned like FLOAT, instead of occupying the space of the original document stream. Let's take another question that people often encounter in their daily lives as an example-highly adaptive

Think twice, the principle of highly adaptive is actually this:

 

<Div id = "a">

<Div id = "B"> This is B </div>

<Div id = "c"> This is c </div>

</Div>

This structure is a wrapped in B and c, the color remains unchanged, the height of a is automatic, the height of B is 100, and the height of C is 500. Both B and c are left floating

Effect:

 

 

 

Obviously, a is not supported. The reason is that they no longer occupy space when they are floating. Since there is no space available, it means there is nothing in the container, so don't open it. The solution is to add a DIV behind the yellow DIV, and then clear the floating. Let him have space to take up, and naturally it will be open. Try it!

 

Effect after cleanup:

 

 

Summary:

 

1. There are three types of CSS positioning mechanisms: normal stream, floating and positioning.

2. Document Stream: from top to bottom, from left to right, simple or normal layout.

3. Positioning: (position)

 

Static: Keep the document flow.

Relative: displacement occurs Relative to the original position and the document flow is maintained, occupying space.

Absolute: removes the Document Stream, occupies no space, and locates it relative to its contained block.

4. Floating: (flaot) is out of the Document Stream and does not occupy space.

5. I used to think that the position: static attribute is a lot more than that. Now it seems that its role is to keep the element in the document flow!

The above are all problems I found in the course of learning. We welcome the students who have more ideas to share their opinions with each other to achieve the effect of common progress.

What is the Document Stream in css?

It is a normal stream. Just as you previously used table layout to only involve document streams, for example, if an element that is absolutely positioned does not occupy the document stream, it will ignore the existence of the Document Stream and float the existing content. If it is relatively positioned to occupy the document stream, it will overwrite the existing content if it is not positioned properly. Floating things do not take up, but the document flow will be around floating things. Because div layout is often floating, it is difficult to layout without floating. For example, if a primary div1 is a document stream, assume that there are (2 floating div (high 100px) in it. If you do not clean it, or overflow or other processing methods. Because your things are in two floating Divs, then you take the primary div2, then it appears under div1, instead of 100px, of course, ie will automatically expand the height, but other browsers do not.

What is the separation of Document Stream in CSS?

Leaving the Document Stream is just a way of parsing html documents. The document flow is relatively normal. Normal document flow is the html document structure that we do not use css styles to control. The order of the interface you write is the order in which the webpage is displayed. For example, five div blocks are written. The normal Document Stream displays the five div blocks in sequence. From left to right, from top to bottom. A document stream disconnection means that the position displayed by it is not necessarily consistent with the document code. For example, you can use css control to display the last div block in the place of the first div block. This is just a browser solution. However, the dom structure remains unchanged. It is still the same as the html document you wrote. This node can be obtained using js.