What are the three layouts in html?

Flow layout (the default layout of html web pages)

(Video tutorial sharing: html video tutorial)

Features :

1. Block elements will be vertically extended from top to bottom in the containing element, because by default, the width of block elements is 100%.

2. Inline elements will be displayed horizontally from left to right within the containing element. (Inline elements are not as domineering as block elements and occupy a line of their own)

Floating layout (float)

Features: Under the default layout, block elements are so domineering that they occupy a line of their own. If we now I want two block elements to be displayed side by side. You need to use float to achieve this.

As follows

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

3. Layer model

Features: If I want a div to be on top of another div, we need to use absolute positioning to complete it. Layer model The three positioning methods relative, absolute, and fixed

absolute

need to set position:absolute (indicating absolute positioning). The function of this statement is to drag the element out of the document flow, and then use The left, right, top, and bottom attributes are absolutely positioned relative to their closest parent containing block with a positioning attribute. If no such containing block exists, it is relative to the body element, that is, relative to the browser window.

relative

If you want to set the relative positioning of the element in the layer model, you need to set position:relative (indicating relative positioning), which determines the normal position of the element through the left, right, top, and bottom attributes. The offset position in the document flow. The process of relative positioning is to first generate an element in static (float) mode (and the element floats like a layer), and then moves relative to the previous position. The direction and amplitude of the movement are determined by the left, right, top, and bottom attributes. , the position before offset remains unchanged.

fixed

fixed: Indicates fixed positioning, similar to the absolute positioning type, but its relative movement coordinates are the view (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 fixedly positioned elements will always be in A certain position of the view within the browser window that will not be affected by the flow of the document. This has the same function as the background-attachment:fixed; attribute.

Note:

When using the z-index attribute, only elements that use the position attribute have the z-index attribute. Elements that do not use the position attribute do not have the z-index attribute, and it is useless to set it.

Related recommendations: html tutorial

The above is the detailed content of What are the three layouts in html?. For more information, please follow other related articles on the PHP Chinese website!