What are the common types of html layouts? Analysis of three layout characteristics of html

What are the common types of html layouts? There are three layout methods in HTML: fluid layout, floating layout and layer model. Each of these three layout methods in HTML has its own characteristics. This article will briefly talk about the characteristics of the three layout methods in HTML.

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

Features:

1. Block elements will Extend vertically in order from top to bottom within 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 that occupy one line)

2. Floating layout (float)

Features: Under the default layout , block elements are so overbearing that they occupy one row. Now if we 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 be able to use absolute positioning to complete the three positioning methods of the layer model: relative, absolute, fixed

Absolute positioning (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 to perform absolute positioning relative to its closest parent containing block with a positioning attribute. .
If there is no such containing block, it is relative to the body element, that is, relative to the browser window.

Relative positioning (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 Determine 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 positioning (fixed)

fixed: indicates fixed positioning, similar to the absolute positioning type,
but its relative movement coordinates are in the view (in the screen the web page window) 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 have the z-index attribute. Elements that do not use the position attribute do not have the z-index attribute, and it is useless if it is set.

Recommended related articles:

html Three ways of css layout (natural layout/ Fluid layout/positioning layout)_HTML/Xhtml_Web page production

Use HTML and HTML to implement common layouts_html/css_WEB-ITnose

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