Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use Positioning positioning attributes in CSS". The editor shows you the operation process through an actual case. The operation method is simple and fast, and it is practical. I hope this article "how to use Positioning positioning attributes in CSS" can help you solve the problem.

CSS Positioning positioning

The CSS Positioning attribute allows you to position elements.

CSS positioning and floating

CSS provides attributes for positioning and floating that can be used to create column layouts, overlap one part of the layout with another, and accomplish tasks that have typically required multiple tables for years.

The basic idea of positioning is simple. It allows you to define where the element box should appear relative to its normal position, or relative to the parent element, another element, or even the browser window itself. Obviously, this feature is very powerful and surprising. It should come as no surprise that user agents support location in CSS2 far more than anything else.

On the other hand, floating is proposed in CSS1, which is based on a function that Netscape added in the early days of Web. Floating is not exactly positioning, but it is certainly not a normal flow layout. We will clarify the meaning of floating in later chapters.

Everything is a frame.

Div, H2, or p elements are often called block-level elements. This means that these elements are displayed as one piece of content, that is, "block boxes". In contrast, elements such as span and strong are called "inline elements" because their contents are displayed in the line, or "inline box."

You can use the display property to change the type of the generated box. This means that by setting the display attribute to block, you can make inline elements, such as elements, behave like block-level elements. You can also make the generated elements have no boxes at all by setting display to none. In this way, the box and all its contents are no longer displayed and do not take up space in the document.

In one case, however, block-level elements are created even if they are not explicitly defined. This happens when some text is added to the beginning of a block-level element, such as div. Even if these texts are not defined as paragraphs, they are treated as paragraphs:

Sometext

Somemoretext.

In this case, this box is called an anonymous block box because it is not associated with a specifically defined element.

A similar situation occurs on the text lines of block-level elements. Suppose you have a paragraph with three lines of text. Each line of text forms a nameless box. You cannot apply styles directly to unnamed blocks or row boxes because there is no place to apply styles (note that row boxes and inline boxes are two concepts). However, this helps to understand that everything you see on the screen forms some kind of box.

CSS location mechanism

CSS has three basic positioning mechanisms: normal stream, floating and absolute positioning.

Unless specifically specified, all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by its position in X (HTML).

Block-level boxes are arranged one after another from top to bottom, and the vertical distance between the boxes is calculated by the vertical outer margin of the box.

The inline box is arranged horizontally in a row. You can adjust their spacing using horizontal inner margins, borders, and outer margins. However, the vertical inner margin, border, and outer margin do not affect the height of the inline box. A horizontal box formed by a row is called a LineBox, and the row box is always high enough to accommodate all the inline boxes it contains. However, setting the row height can increase the height of this box.

In the following chapters, we will explain relative positioning, absolute positioning and floating for you in detail.

CSS position attribute

By using the position attribute, we can select different types of positioning in 4, which affects the way element boxes are generated.

The meaning of the ◆ position attribute value:

Static

The element box is generated normally. Block-level elements generate a rectangular box as part of the document flow, while inline elements create one or more line boxes to be placed in their parent elements.

Relative

The element box is offset by a distance. The element still retains its unpositioned shape, and the space it originally occupied remains.

Absolute

The element box is completely removed from the document stream and positioned relative to its containing block. The inclusion block may be another element in the document or the initial inclusion block. The space previously occupied by the element in the normal document stream is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it originally generated in the normal flow.

This is the end of the introduction on "how to use Positioning positioning properties in CSS". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.