Shulou(Shulou.com)06/01 Report--

This article will explain in detail the ways of html+css layout for you. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

1. Natural layout

The layout without any embellishments is automatically left.

two。 Flow layout

The situation of float:left mentioned above.

3. Positioning layout

Both relative and absolute positioning are relative to the parent div tag.

Relative-take the position of this element as the reference point

Absolute-takes the origin of the parent div tag (upper left corner) as the reference point.

Because the outer layer is position:relative, 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, only position:relative is written in the outer layer, and the two values of left,top are written, which means that the left,top is aligned with the layout reference origin based on the position where the element should have been.

In another case, if there is no position:relative on the outer layer of a position:absolute;, which point will you look for as a reference? The principle at this time is: if there is a relative in a parent element, then take a parent element as the reference origin, if there is no position:relative, then take body as the reference origin. If there is no relative outside the position:absolute, there is no difference between the two layouts.

Of course, the last case is: the outer layer is: inside the position:absolute; is position:relative, what will happen? According to the original principle, absolute will refer to body as the layout origin, relative will refer to where he should be as the layout origin, which is actually referring to the upper-left corner of the outer layer as the layout origin.

The rest depends on the actual situation.

This is the end of this article on "what are the ways of html+css layout?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.