Home > Developer > JavaScript
7. Document Stream-related and Document Stream
1. What is a document stream?
A document flow shows the position occupied by objects in a document. In other words, the form is divided from top to bottom into one row, and the elements are discharged from left to right in each row, that is, the document flow. (you can understand the order of the document from start to end, where the document is located, or the order from top to bottom and from left to right)
Ii. Document Stream code
<!DOCTYPE html>Code snippet running result
Is the standard Document Stream, arranged in order. The location where it is.
Iii. Method of discontinuing from Document Stream:
Currently, there are two methods to exit the Document Stream: 1. float; 2. positioning is postion.
Iv. float
The float attribute defines the direction in which the element floats. In the past, this attribute was always applied to images, so that text is centered around the image and any element in CSS can be floating. A floating element generates a block-level box, regardless of its own elements. If the floating non-replacement element is used, a specific width should be specified; otherwise, they will be as narrow as possible. Float is out of the document flow, because the elements that are out of the document flow have a flag indicating that there is no actual height (Note: if there is only a small amount of space on top of a row for element float, this element will jump to the next row, and the process will continue until a row has enough space .).
Features:
1. blocks are displayed in a row;
2. inline support for width and height;
3. Open the default content width;
4. Exit the document stream;
5. Upgrade the level half layer.
Floating code
<!DOCTYPE html>
Display result
Compared with the stream code of the first section, after the floating
# The box height is 0, but # div1 does not support the parent height because it no longer occupies space when it floats. Since there is no space available, it means there is nothing in the container, so don't open it.
And left: 20px does not take effect. Therefore, for floating attributes, the position attribute (left/top/right/bottom) is useless. That is to say, # div1 is out of the original document stream.
If you add a div2 in # box, you can clearly see whether it is out of the Document Stream.
<!DOCTYPE html>The running result is as follows:
We can clearly see that 03 occupies 02 text, which means 02 is actually out of the document stream, and the width of 01 is also opened by 02. In addition, the 02 level is higher than 03.
V. Positioning
1. Concept (from Baidu and http://www.cnblogs.com/chuaWeb/p/html_css_position_float.html)
In CSS, the positioning content is: position: relative | absolute | static | fixed.
●StaticThere are no special settings. The basic positioning rules are followed, and hierarchical classification cannot be performed through z-index.
●RelativeDo not leave the Document Stream. Refer to the static position of the file to locate it through top, bottom, left, right, and perform hierarchical classification through z-index.
●AbsoluteRemove the Document Stream and locate it through top, bottom, left, right. Select the most recent parent-level positioning element. When the parent-level position is static, the absolute element is located at the origin of the body coordinate, and can be hierarchical using z-index.
●FixedFixed positioning. Here, the fixed pair is like a visual window, not a body or a parent element. You can perform hierarchical classification using z-index.
TheCascade and grading: Z-index: auto | namber;
●AutoFollow the positioning of its parent object
●NamberAn integer with no unit. Negative
Ii. Table description:
| Value | Description |
|---|---|
| Absolute | Generates absolute positioning elements, which are located relative to the first parent element other than static positioning. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. |
| Fixed | Generates absolute positioning elements, which are located relative to the browser window. The positions of elements are specified by the "left", "top", "right", and "bottom" attributes. |
| Relative | Generates relative positioning elements and locates them relative to their normal locations. Therefore, "left: 20" adds 20 pixels to the LEFT position of the element. |
| Static | Default value. The element is not located and appears in the normal stream (ignore the top, bottom, left, right, or z-index declarations ). |
| Inherit | Specifies that the value of the position attribute should be inherited from the parent element. |
Simply put, elements with the position value absolute and fixed are separated from the document stream, while static and relative are not separated from the document stream.
Code
<!DOCTYPE html>The effect is as follows:
Conclusion:
1. static positioning is not separated from the document stream. Setting left/top/right/bottom does not work and is sensitive to margin/padding.
[Evidence: # positioning left in div1 has no function]
2. both parent and child nodes are separated from the static and relative positioning margin (margin) of the document. The display effect is based on the biggest margin.
[Evidence: # div1, # div2, # div3, # div4 are non-document elements and are parent-child node relationships. Their marginTop values are 20px/30px/40px/50px, respectively. # Div1 and # div2 outer margins are merged, and the merged top margin is 30px. Then # div2 merges the previously merged result with the # div1 outer margin, after merging, the top margin is 40px. Finally, # div3 merges the previously merged result with the # div4 margin, and the merged result is 50px. Therefore, the final merge margin is 50px.
Absolute: absolute positioning. Drag an object out of the Document Stream and use the left, right, top, bottom, and other attributes to absolutely locate the parent object with the most specific positioning settings relative to the object. If such a parent object does not exist, it is based on the body object. Its stack is defined by the z-index attribute.
. When the object is located outside the browser window, the browser displays a scroll bar.Fixed: fixed positioning. Object positioning follows the absolute (absolute) method. However, some rules must be followed. When the object is located outside the browser window, the browser does not display the scroll bar. When the scroll bar is rolling, the object is always fixed in the original position.
Relative: relative positioning. The object cannot be stacked, but it will be offset in the normal Document Stream Based on the left, right, top, bottom and other attributes. When the object is located outside the browser window, the browser displays a scroll bar.Static: the element box is generated normally. Block-level elements generate a rectangular box. As part of the Document Stream, one or more row boxes are created for the element in the row and placed in the parent element.
Inherit: the inherited value. The object inherits the corresponding value of its parent object.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
