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

This article is about how to use normal streaming, floating and absolute positioning in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

CSS positioning and floating

The CSS positioning attribute allows you to position the element.

CSS provides properties for positioning and floating, and you can create a column layout that overlaps one part of the layout with another.

Positioning allows you to define the position of the element box relative to its normal position, parent element, another element, or even the browser window itself.

On the other hand, floating is proposed for the first time in CSS1, which is not exactly positioning, but it is certainly not a normal flow layout.

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".

Elements such as span and strong are called "inline elements" because their contents are displayed in the line, that is, "inline box."

You can use the display property to change the type of the generated box.

By setting display to block, you can make inline elements (for example) behave like block-level elements.

By setting display to none, 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, such as the beginning of div, are created even if they are not explicitly defined:

Some text

Some more text.

Note: even if this text is not defined as a paragraph, it will be treated as a paragraph (block-level element).

Note: in this case, this box is called an unnamed block box because it is not associated with a specifically defined element.

Tip: you cannot apply a style directly to an unnamed block or row box because there is no place to apply the style.

CSS location mechanism

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

Typically, all boxes are positioned in a 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.

Note: Line Box and inline boxes are two concepts, and the row box is always high enough to accommodate all the inline boxes it contains.

CSS position attribute

By using the position attribute, we can select four different types of positioning, 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 and inline elements generate boxes as part of the document flow, respectively.

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 (generating a new block-level box).

Fixed: the element box behaves like setting position to absolute, except that the containing block is the window itself.

Relative positioning relative

H3.pos_left {position: relative; left:-20px} h3.pos_right {position: relative; left: 20px} this is the title in the normal position, the title moves to the left relative to its normal position, and the title moves to the right relative to its normal position.

Relative positioning moves the element according to its original position.

The style "left:-20px" subtracts 20 pixels from the original left position of the element.

The style "left:20px" adds 20 pixels to the original left position of the element.

Note: this example shows how to position an element relative to its normal position.

Absolute positioning absolute

H3.pos_abs {position: absolute; left: 100px; top: 150px}

Note: this example demonstrates how to use absolute values to position elements.

Fixed positioning fixed

P.pos_fix {position: fixed; left: 5px; top: 5px;}

Note: this example shows how to position an element relative to a browser window.

Element content overflow overflow

The overflow attribute defines how the content that overflows the content area of the element will be handled:

Visible: default value. The content will not be trimmed and will be rendered outside the element box.

Hidden: the content is trimmed and the rest is invisible.

Scroll: the content is trimmed, but the browser displays a scroll bar to see the rest of the content.

Auto: if the content is trimmed, the browser displays a scroll bar to view the rest of the content.

Inherit: specifies that the value of the overflow attribute should be inherited from the parent element.

If the content in the element exceeds the given width and height attributes, the overflow attribute is used.

The div {background-color: # 00FFF; width: 150px; height: 150px; overflow: scroll;} overflow attribute determines whether behaviors such as scroll bars are displayed. This attribute defines what to do with the content of the overflow element content area. The default value is visible. If the value is scroll, the user agent provides a scrolling mechanism whether it is needed or not. Therefore, it is possible that a scroll bar will appear even if everything can be dropped in the element box.

Set the shape of the element

Img {position: absolute; clip: rect (0px 50px 200px 0px)}

The clip property cuts an image:

Note: this example demonstrates how to shape an element. This element is clipped into this shape and displayed.

Vertical arrangement of images

Img.top {vertical-align: text-top} img.bottom {vertical-align: text-bottom}

Image

In the paragraph.

Image

In the paragraph.

Note: this example shows how to arrange images vertically in text (top alignment, bottom alignment).

Z-index

Img.x {position: absolute; left: 0px; top: 0px; z-index:-1} this is a title

The default z-index is 0. Z-index-1 has a lower priority.

Note: Z-index can be used to place one element after another.

Img.x {position: absolute; left: 0px; top: 0px; z-index: 1} this is a title

The default z-index is 0. Z-index 1 has a higher priority.

CSS location attribute and description

Position: place an element in a static, relative, absolute, or fixed position.

Top: defines the offset between the upper outer margin boundary of an positioning element and the upper boundary of its containing block.

Right: defines the offset between the right outer margin boundary of the positioning element and the right boundary of its containing block.

Bottom: defines the offset between the lower margin boundary of the positioning element and the lower boundary of its containing block.

Left: defines the offset between the left outer margin boundary of the positioning element and the left boundary of its containing block.

Overflow: sets what happens when the content of an element overflows its area.

Clip: sets the shape of the element. The element is cut into this shape and then displayed.

Vertical-align: sets the vertical alignment of elements.

Z-index: sets the stacking order of elements.

Thank you for reading! This is the end of the article on "how to use ordinary streaming, floating and absolute positioning in CSS". 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, you can 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.