What are the layout methods of html?

1. Fluid layout (the default layout of html web pages)

Features:

1. Block elements will be placed where they are The containing elements extend vertically in order from top to bottom, 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 overbearing as block elements and occupy a row)

2. Floating layout (float)

Features: In the default layout, block elements are so overbearing They all occupy one row, if now we want two block elements to be displayed side by side. You need to use float to achieve this.

As follows

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

3. Layer model

Features: If I want a p on top of another p, We need to be able to use absolute positioning to complete the three positioning methods of the layer model: relative, absolute, fixed

##absolute

You need to set position:absolute (indicating absolute positioning). The function of this statement is to drag the element out of the document flow. Then use the left, right, top, and bottom attributes relative to its closest A parent containing block with a positioning attribute performs absolute positioning.
If there is no such containing block, it is relative to the body element, that is, relative to the browser window.

##relative

If you want to set the relative positioning in the layer model for the element, you need to set position:relative (indicating relative positioning),

It determines the offset position of the element in the normal document flow through the left, right, top, and bottom attributes. The process of relative positioning is to first generate an element in static (float) mode (and the element floats like a layer),
then moves relative to the previous position, and the direction and amplitude of the movement are determined by left and right , top and bottom attributes are determined, and the position before offset is retained.

##fixed

fixed: indicates fixed positioning, similar to the absolute positioning type,

but its relative movement coordinates are the view ( the web page window within the screen) itself.

Since the view itself is fixed, it will not change with the scroll bar of the browser window, Unless you move the screen position of the browser window on the screen, or change the display size of the browser window,
So the fixedly 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 has the same function as the background-attachment:fixed; attribute.

Note

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

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