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

This article mainly introduces what CSS positioning refers to, the article is very detailed, has a certain reference value, interested friends must read it!

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. (recommended study: CSS getting started tutorial)

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 for the first time 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 the (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.

The above is all the contents of the article "what does CSS orientation mean?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow 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.