HTML+CSS layout model for easy entry

In web pages, elements have three layout models:

1, flow model (position: static)

2, floating model (float: left, right)

3, layer model (position: absolute, fixed, relative)

The more special layout method is:

position: relative

It retains the space occupied by the element in the "flow model" or "floating model" and does not change the display mode of the element: "inline" Or "lumpy". It only tells the element to move relative to its original position. But it is an element of the layer model layout after all. If it overlaps with other elements, it will be displayed above the elements of the non-layer model layout. In addition, after setting relative, the element will have a complete box model. Even for inline elements, setting height, top and bottom padding, and top and bottom borders will become effective, and these settings will be reflected in the space it occupies in the document flow. superior.

Flow model

Flow is the default web page layout mode. Any element that does not specifically define the position:absolute; or position:fixed; attribute, and does not have float:left; or float:right; defined, will render the flow

dynamic layout mode by default.

Flow layout model has 4 typical characteristics:

1, block elements will be pressed from top to bottom within the containing element. The order extends vertically, because by default, the width of block elements is 100%. In fact, block elements will occupy their position in the form of rows, regardless of how much content the element contains or how narrow we set the width of the element.

2. Inline elements will be displayed horizontally from left to right within the containing element. Some people call this distribution method text flow. Text flow originates from the natural flow of text from left to right. In essence, it is closely related to the HTTP transmission method and the browser's parsing mechanism. After one line is exceeded, it will automatically wrap and display from top to bottom, and then continue to flow sequentially from left to right, and so on. Of course, readers can use CSS text properties to force the text flow direction.

3. If two adjacent block elements or nested block elements have upper and lower margins defined, they will overlap. The result of the overlap is the maximum value between the two. For nested overlap, you can prevent this overlap by defining the overflow attribute value of the parent element to "auto".

4. The margins of floating elements will not overlap. When floating elements come into contact with block elements, the element that appears after them will be used to determine whether to overlap. From a programming perspective, it is more efficient to modify the already constructed DOM tree than to decide how to display the next element. If the floating element is the parent element of the block element, it should overlap according to the above rules, but the floating element will automatically calculate the internal height and width, so the resulting margins will not overlap.

Floating model

Floating is another layout model that is completely different from flow. It follows the rules of floating but still can See the potential impact of flow on it. Any element cannot float by default, but it can be defined as floating using CSS. Elements such as div, list, p, table, and img can all be defined as floating. In fact, even elements such as span, strong, etc. Such inline elements can also be defined as floats.

The floating layout model has the following characteristics:

1. Any element defined as float will automatically be set to block display. This way you have a complete box model.

2. If we do not specify the width of the floating element, the floating element will automatically shrink to the width that can contain the content.

3. The floating model will not conflict with the flow model. When an element is defined as a float layout, the floated element will not float arbitrarily away from the normal document flow, and its top edge will be at the same position as when it was not declared floated. But in the horizontal direction, its floating edge will be as close as possible to the edge of the containing element (this edge refers to the inner edge of the containing element's padding).

4. Like ordinary elements, floating elements are always located within the containing element and will not float outside or destroy the element containment relationship, which is different from the layer layout model.

5. Regarding the problem of surrounding flowing elements. Although floating elements can flow with the document, there are still essential differences between the floating model and the flowing model. The inline elements behind the floating element can surround the floating element in a flow form, and even flow together with the text above. The block element is different. It ignores the space occupied by all floating elements, as if the floating element does not exist at all, and determines its position in the flow model in this way.

6. Regarding the problem of juxtaposed display between floating elements. When two or more adjacent elements are defined as floating, the floating elements can be displayed side by side if there is enough space to accommodate them. Their upper edges are on the same level. If there is not enough space, the subsequent floated element will move down to a place that can accommodate it. This downwardly moved element may create a separate float. Many designers like to use floating models to lay out web pages because it can break through the problem that block elements in fluid model layouts cannot be displayed side by side.

7. When floating, the floating element will be as close as possible to the previous floating element, thereby squeezing other non-floating elements aside. If it cannot be squeezed (such as a block element, or there is not enough space to display the inline element and this floating element on the same line)

The other elements will be wrapped and displayed immediately next to the previous element. after.

8. Summary: The floating element is still in the document flow, positioning itself with the document flow element, but it does not occupy the space of the document flow.

Floating clear

Only block elements can define clearing attributes, for inline Element definition clear is invalid. Setting "clear:both" on a block element will ensure that no floating elements will appear on the left or right when it is parsed. But if

it is a floating element (the float attribute is set), subsequent floating elements may still float around it. When a floating element defines the clear attribute, it will not affect any previous objects, nor will it affect subsequent objects. It will only affect its own layout position. The influence here means that the position of other objects will not be actively changed.

Note: Personally, the Chinese name of this attribute is better translated as "clean". It indicates which side of the current element is guaranteed when it is parsed

It is clean and free of floating matter.

Floating nesting

Floating elements can be nested with each other, and nested laws are the same as liquid elements nested. The floating element will automatically adjust the ourselves height and width to achieve the containing floating sub -element. Elements that define "float" will automatically calculate the width and height occupied by the floating elements within the element, and make it consistent with the content within it. adapt. If this attribute is not defined, the width and height cannot be automatically calculated, resulting in abnormal width and height display of the parent element. You can also automatically expand the width and height of the element by defining the overflow attribute of the parent element to "auto" .

Floating and flow nesting

floating elements are embedded within flowing elements, the display effect will be very complicated. At this time, the containing elements will be based on It displays its own attributes and is no longer affected by the child floating elements. That is to say, the parent element cannot adapt to the height of the child floating elements. The starting point of the floated element will be determined by its position within the containing element, but the floated element will expand on top of the containing element, which will be somewhat similar to an absolutely positioned element.

##Layer model

The layer layout model is derived from graphics The very popular layer editing function in image editors. Layers can accurately manipulate and edit images and are widely welcomed by graphic designers. However, in the field of web design, due to the mobility of web page sizes, layers The cloth

In order to support the layer layout model, CSS defines a set of positioning (

positioning) properties. The design idea of ​​element positioning is very simple. It allows users to accurately define the relative position of web page elements. The relative here can be the position displayed relative to the original element, or the relatively nearest containing element. Block element, or relative to the browser window. Positioning type

1.static: Indicates no positioning, the element follows the HTMLdefault flow model, if not explicitly If the positioning class of the declared element is , it will default to this value.

2.absolute: indicates absolute positioning, removes the element from the document flow Drag it out, and then use left, right, top, # Bottom Properties Compared to the closest to the parent with positioning attributes to include absolute positioning. If there is no such thing as this , it is compared to ## Body ## Series, that is, according to the browser window, and its layers of stacking sequences through # Z-index attribute definition.

3.fixed: Indicates fixed positioning, similar to the absolute positioning type. But its containing block is the view (the web page window within the screen) itself. Since the view itself is fixed, it will not change as the scroll bar of the browser window scrolls, unless you move the screen position of the browser window on the screen, or change the display size of the browser window, so it is fixed The positioned element will always be located somewhere in the view within the browser window and will not be affected by the flow of the document. This is consistent with backgroundattachment:fixed;Attributes have the same function.

4.relative: Indicates relative positioning, which uses left, right, top, bottomAttributes determine whether the element is in the normal document flow (or floating model ) in the offset position. The process of relative positioning is to first generate a element in the static(float)

way, and then move the element. The movement direction and amplitude are determined by left、right、top、bottom The attributes are determined, and the shape and position of the element before offset are retained