Web front-end css positioning and floating float_html/css_WEB-ITnose

I have recently done several projects: financing companies, ecmal mall, etc. Customers have very high requirements for the front desk. So, today let’s talk about the basics, core, and positioning issues of CSS.

div, h1 or p elements are often called block-level elements. This means that these elements appear as a block of content, a "block box". In contrast, elements such as span and h3 are called "inline elements" because their content is displayed in a line, which is an "inline box".

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

A similar situation occurs with lines of text for block-level elements. Suppose you have a paragraph containing three lines of text. Each line of text forms an unnamed box. You cannot directly apply styles to nameless blocks or line boxes because there is no place to apply styles (note that line boxes and inline boxes are two different concepts). However, 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, floating and absolute positioning.

All boxes are positioned in normal flow unless specifically specified. 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 boxes is calculated from the vertical margin of the box.

Inline boxes are arranged horizontally in a row. Their spacing can be adjusted using horizontal padding, borders, and margins. However, vertical padding, borders, and margins do not affect the height of the inline box. The horizontal box formed by a line is called a line box (LineBox). The height of a line 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.

Below, we will explain relative positioning, absolute positioning and floating in detail.

CSS position property

By using the position property, we can choose from 4 different types of positioning, which affects the way the element box is generated .

The meaning of the position attribute value :

static

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

relative

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

absolute

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

fixed

The element box behaves like setting position to absolute, but its containing block is the viewport itself.

Tip: Relative positioning is actually considered part of the normal flow positioning model, since an element's position is relative to its position in the normal flow.

CSS positioning properties

CSS positioning properties allow you to position elements.

Attribute description

position places the element in a static, relative, absolute, or fixed position.

top defines the offset between the top margin boundary of a positioned element and the top boundary of its containing block.

right defines the offset between the right margin edge of the positioned element and the right edge of its containing block.

bottom defines the offset between the bottom margin boundary of the positioned element and the bottom boundary of its containing block.

left defines the offset between the left margin edge of the positioned element and the left edge of its containing block.

overflow sets what happens when an element's content overflows its area.

clip sets the shape of the element. The element is clipped into the shape and then displayed.

vertical-align sets the vertical alignment of an element.

z-index sets the stacking order of elements.

CSS provides some properties for positioning and floating. With these properties, you can create column layouts, overlap one part of the layout with another, and complete tasks that for many years have usually required the use of multiple tables. .

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 Location. Obviously, this feature is very powerful and surprising. It shouldn't be surprising to know that user agents support positioning in CSS2 much better than other aspects.

On the other hand, floating was first proposed in CSS1, which was based on a feature added by Netscape in the early days of the development of the Web. Floating isn't exactly positioning, but it's certainly not a normal flow layout either. We will clarify the meaning of floating in a later chapter.

Everything is a frame

The

p, h1, or p element is often called a block-level element. This means that these elements appear as a block of content, a "block box". In contrast, elements such as span and h3 are called "inline elements" because their content is displayed in a line, which is an "inline box".

You can change the type of generated box using the display attribute. 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 set display to none so that the generated element has no frame at all. This way, the box and all its contents are no longer visible and take up no space in the document.

But in one case, a block-level element is created even without explicit definition. This happens when you add some text to the beginning of a block-level element (such as p). Even if the text is not defined as a paragraph, it will be treated as one.