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

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: indicates fixed positioning, similar to the absolute positioning type,

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.

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!