Learn CSS positioning (layout)

Document Stream: 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.

The elements that are divided into rows from top to bottom referBlock-level elementsIn each row, the elements discharged in the order from left to right are calledLine Element(There are many naming conventions. Here we only use one of them ):

Common block-level elements

Common in-row Elements

Address-address BLOCKQUOTE-block reference Center-align the chunk Dir-directory list Div-Easy to use block-level, which is also the main tag of CSS layout DL-definition list Fieldset-Form Control Group Form-interactive form H1-title H2-subtitle H3-Level 3 title Level H4-4 title H5-Level 5 Title H6-6 level title HR-horizontal Separator Isindex-input prompt Menu-Menu list Noframes-frames (this block content is displayed in browsers that do not support frame) NoScript-optional script content (this content is displayed in browsers that do not support scripts) Ol-Sort list P-paragraph Pre-format text Table-table Ul-non-sorted list

A-anchor Abbr-abbreviation Acronym-First word B-bold (not recommended) BDO-bidi override Big-font size Br-line feed Cite-Reference Code-computerCode(Required when source code is referenced) Dfn-define Fields Em-emphasis Font-font setting (not recommended) I-italic IMG-Image Input-input box KBD-define keyboard text Label-Table label Q-short reference S-hyphen (not recommended) Samp-definition example computer code Select-Project Selection Small-small font text Span-commonly used inline containers that define text blocks Strike-dashes Strong-highlighted in bold Sub-subscript Sup-superscript Textarea-multi-line text input box TT-telex text U-underline VaR-define variables

We can use the display attribute to change the element type and set dispaly to block to make the row behave like a block-level element. Set display to inline to make the block-level element representation the same as the row-level element; you can also set display to none to make the generated elements have no boxes at all. In this way, the box and all its content are no longer displayed and do not occupy space in the document.

The position attribute specifies the positioning type of the element;

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	Generate absolute positioning elements, relativeLocate 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 ).

Positioning:

1. Normal stream positioning: All frames are located in normal streams unless otherwise specified. That is to say, the element position in a normal stream is determined by the element position in (x) HTML. Block-level boxes are arranged one by one from top to the next. The vertical distance between frames is calculated by the vertical margin of the boxes. Horizontal layout of the lines in the box. You can use the horizontal padding, border, and margin to adjust their spacing. However, the vertical padding, border, and outer margin do not affect the height of the row's inner frame. The horizontal Box formed by a row is calledLine box)The height of the line box is always enough to accommodate all the lines it contains. However, setting the Row Height can increase the height of the box.

2. Floating positioning: The floating element can be left or right, and the outer edge of the floating element can be reached by the border of the contained box or another floating box. The floating element does not occupy any normal file stream space, the positioning of floating elements is based on the normal document stream, and then extracts from the document stream and moves it as far as possible to the left or right side. 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 (that isOriginal placeholder is not retained), The clear attribute specifies which side of the element does not allow other floating elements. A floating element will generate a block-level box, regardless of its own elements. It must specify a width, otherwise it will be as narrow as possible; in addition, when the available floating space is smaller than the floating element, it will run to the next row until it has enough space to put it down ..

3. Relative positioning: Offset relative to the element in the Document Stream. HoweverRetain original placeholder,When relative positioning is used, elements still occupy the original space no matter whether they are moved or not. Therefore, moving an element overwrites other frames;

4. Absolute positioning: the object is completely out of the document stream. It is not a static value relative to the position attribute (that isAlready located) To overwrite other elements on the page;

5. Fixed positioning: it allows HTML elements to be separated from the document stream and fixed to a certain location in the browser.

6. Z-index: controls the placement order of elements. If the value is set to-1, it can be used to place one element after another;

Conclusion: 1: relative positioning refers to the initial position of the "relative" element in the document, while absolute positioning refers to the "relative" Recent "located ancestor element. If there is no located ancestor element, then, "relative" refers to the initial inclusion block. Parent container uses relative positioning. After the child element uses absolute positioning, the position of the element is no longer relative to the upper left corner of the browser, but relative to the upper left corner of the parent window, relative positioning and absolute positioning must be used together with top, right, bottom, and left to locate specific locations. These four attributes take effect only after the element is positioned. Otherwise, they are invalid. In addition, these four attributes can only use two adjacent attributes at the same time. They cannot use or use left or right even if they are used; 2: Achieve a highly variable layout;

A frequently encountered problem during layout is high variability, especially in the middle of the content, as shown below:

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml">  
 
Display Effect:
 

 
 

The layer whose ID is content is reduced to a blue line (not the quilt element that everyone imagined), while its child selection elements are normally routed to the left, how to enable the content layer to be opened, that is, to expand its background color, as long as it is set to floating, the element will be as narrow as possible after it is set to floating, set the width according to your own needs: The following is the value after the content is set to float:
 

 
 

 
In this way, as long as the height of the floating child element changes, the height of the content will be affected, so as to achieve a highly variable layout.