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

Xiaobian to share with you what CSS positioning is, I believe most people do not know how, so share this article for everyone's reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

The CSS Positioning property allows you to position elements.

CSS positioning and floating

CSS provides attributes for positioning and floating that allow you to create column layouts, overlap one part of a layout with another, and perform tasks that have typically required multiple tables over the years. (Recommended Learning: CSS Introduction Tutorial)

The basic idea of positioning is simple; it allows you to define where an element box should appear relative to its normal position, or relative to a parent element, another element, or even the browser window itself.

Obviously, this function is very powerful and surprising. It should come as no surprise that user agents support positioning in CSS2 more than anything else.

Floats, on the other hand, were first introduced in CSS1, building on a feature Netscape added in the early days of the Web. Floating is not exactly positioning, however, it is certainly not a normal flow layout. We will clarify the meaning of floating in later chapters.

Everything is a box.

div, h2, or p elements are often called block-level elements. This means that these elements appear as one piece of content, a "block box." In contrast, elements such as span and strong are called "inline elements" because their contents appear in rows, i.e.,"inline boxes."

You can use the display property to change the type of box generated. This means that by setting the display property to block, you can make inline elements (such as elements) behave like block-level elements.

You can also make the generated element have no boxes at all by setting display to none. This way, the box and all its contents no longer appear and take up no space in the document.

But in one case, block-level elements are created even if they are not explicitly defined. This happens when you add some text to the beginning of a block-level element, such as a div. Even if the text is not defined as a paragraph, it is treated as such:

sometext

Somemoretext.

In this case, the box is called an unnamed block box because it is not associated with a specially defined element.

A similar situation occurs for text lines of block-level elements. Suppose you have a paragraph with three lines of text. Each line of text forms an unnamed 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). But it helps to understand that everything you see on the screen forms some kind of box.

CSS positioning mechanism

CSS has three basic positioning mechanisms: normal flow, float, and absolute positioning.

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

The block-level boxes are arranged one after the other from top to bottom, and the vertical distance between the boxes is calculated from the vertical outside distance of the boxes.

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

The above is "CSS positioning is what" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

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.