What is the concept of included blocks in CSS? Guidelines for including block concepts in CSS

The content of this article is about what is the concept of containing blocks in CSS? CSS contains block concept guidelines, which have certain reference value. Friends in need can refer to them. I hope it will be helpful to you.

Root element

By default, the html element is a containing block, and some browsers set the body to be a containing block.

Non-root elements are divided into two situations:

1. For non-root elements that do not set position:absolute, such as position:relative, position:static

This situation The lower containing block is set to the edge of the content area of ​​the nearest block-level element. Note that it is the edge of the content area, not the margin and padding edges.

2. Elements that use position:absolute absolute positioning

In this case, the containing block is set in the nearest postion and is not a static ancestor element (the ancestor element here can be a block-level element, It can also be an inline element

a. If the ancestor element is a block-level element, the containing block is set to the padding edge of the block-level element;

b. If the ancestor element is an inline element, it is included. Block is set to the content edge of the inline element;

Positioning:

"relative to" is relative to the element's initial position in the CSS document flow.

"Absolute " is relative to the nearest positioned ancestor element.

Absolute positioning will cover other elements on the page, and the stacking order can be controlled through the z-index attribute.

Relative in fluid layout Positioning:

Flow layout is the default layout, naturally from left to right, top to bottom.

If the element position:relative and the coordinates are set, the element will be in its original position Offset the coordinates.

The above is the complete introduction to what is the concept of containing blocks in CSS? The concept guidelines of containing blocks in CSS. If you want to know more about CSS3 tutorial, please Follow PHP Chinese website.

The above is the detailed content of What is the concept of included blocks in CSS? Guidelines for including block concepts in CSS. For more information, please follow other related articles on the PHP Chinese website!