Three ways of HTML + CSS layout (Natural layout / flow layout / location layout)

Time:2021-3-4

1. Natural layout
The layout without any decoration is automatically left.
2. Flow layout
What’s mentioned above float:left What’s going on.
3. Positioning layout
Both relative positioning and absolute positioning are relative to the parent div tag.
Relative — take the position of this element as the reference point
Absolute — take the origin (upper left corner) of the parent div label as the reference point.

Because the outer layer is position:relative So if the inner layer is absolute, it will be aligned with the upper left corner of the outer layer as the displacement reference. Of course, I only write position:relative , write the two values of left and top, which means to align left and top with the original position of this element as the layout reference origin.

In another case, it’s just one position:absolute; There is no outer layer position:relative What point would you look for for for reference? At this time, the principle is: if there is a relative in a parent element, then a parent element will be used as the reference origin; if there is no relative, the reference origin will be the parent element position:relative , the body is taken as the reference origin. If position:absolute When the outer layer is not relative, there is no difference between the two layouts.

Of course, the last case is: the outer layer is: position:absolute; It’s inside position:relative What would that be? According to the original principle, absolute will refer to the body as the layout origin, and relative will refer to the position where it should be. In this case, it is actually referring to the upper left corner of the outer layer as the layout origin.
The rest depends on the actual situation.

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]