CSS3 inclusion block and its locating decision

Source: Internet
Author: User

Each layout will always be confused, so the internet found this article, said very detailed, reproduced in the original link: > http://w3help.org/zh-cn/kb/008.html contains the block introduction

In CSS2.1, the positioning and sizing of many boxes depends on the boundary of a rectangle, which is called the containing block (containing block). In general, the (element) generated box plays the role of its descendant elements that contain blocks, which we call: an (element's) box that constructs a containment block for its descendant nodes. The inclusion block is a relative concept.

<div>    <table>        <tr>            <td>hi</td>        </tr>    </table></div>

As an example of the above code, DIV and TABLE are included blocks. The DIV is the containing block of the table, and the table is the containing block of the TD, not absolute.

"The containing block of a box" means "the containing block in which the box exists", not the containing block it was built in. For example, in the code above, the containing block of table, which is the inclusion block constructed by the DIV, is not the containing block built by the table itself. The containing block constructed by TABLE can be called the inclusion block of a TD.

Each box has a position about its containing block, but it does not contain a block limit; it can overflow (contain blocks). The inclusion block can be used by setting the ' overflow ' attribute to achieve the purpose of handling overflow descendant elements.

The concept of containing blocks is important because many of the theoretical knowledge in the visual format model is related to this concept, such as the calculation of the automatic value of the width height, the positioning of the floating element, the positioning of the absolute positioning element, and so on. If you do not understand the inclusion block, you cannot master the subsequent theory based on it.

Include block determination and its scope

As the above shows, the positioning and size of the element frame is related to its containing block, and the element creates a containing block for its descendant elements.

So, does it mean that the element's containing block is its parent element? Does the area containing the block be the content area of the parent element? The answer is in the negative. In this section, you will give a sense of the types of elements that contain blocks and the range of areas that contain blocks. If there is no ancestor element that conforms to the criteria, then the element's containing block is the initial containing block.

The total flow chart containing the block decision is as follows:

root element

The root element, which is the topmost element in the document tree, does not have a parent node.

The containing block in which the root element exists is called the initial containment block (initial containing block). Specifically, related to the client side.

In (X) HTML, the root element is an HTML element (although some browsers use the BODY element incorrectly).
The direction property of the initial containing block is the same as the root element.

Static positioning elements and relative positioning elements

If the element's positioning (position) is "relative" (relative positioning) or "static" (statically positioned), its containing block is created by its nearest block level, cell (table cell), or Content box 1 of the inline block (inline-block) ancestor element.

element if the ' position ' attribute is not declared, then the default value of ' position ' is ' static '.

<table id="table1">  <tr>      <TD ID="TD1">          <div id="Div1" style="padding:20px;border:1px solid red;" >               <span>                   <strong id="Greed" style="position:relative;" >Greed is</Strong>Good 999999</span>          </div>      </td>  </tr></table>

Contains a block relationship table:

ELEMENT contains block
Table1 Body
TD1 table1
Div1 TD1
Greed Div1
The text contained in the SPAN element can be seen in Div1 where the area of the containing block created by DIV1 is its content boundary, which is the inner boundary.

Fixed positioning elements

If the element is a fixed positioning ("position:fixed") element, then its containing block is the currently visible window 2.

Absolutely positioned elements

In general, the inclusion block of an absolute positioning ("Position:absolute") element is created by an ancestor element that is closest to its ' position ' attribute to ' absolute ', ' relative ', or ' fixed '.

If its ancestor element is an inline element, the containing block depends on the ' direction ' attribute of its ancestor element

<p Style="border:1px solid red; width:200px; padding:20px; " >T<span style="Background-color: #C0C0C0; position:relative; " >This text is arranged from left to right, Red xx and blue xx and yellow xx are absolutely positioned elements, and its containing blocks are relatively positioned span. They can be judged by their absolute position to contain the edges of the block.<em style="Position:absolute; color:red; top:0; left:0; " >Xx</em>            <em style="Position:absolute; Color:yellow; top:20px; left:0; " >Xx</em>            <em style="Position:absolute; Color:blue; bottom:0; right:0; " >Xx</em>    </span></P>

In the code above, the text is arranged from left to right in the default way. Red xx and blue xx and yellow xx are absolutely positioned elements, and its inclusion blocks are relatively positioned SPAN. They are positioned to refer to the containing block, which, by standard, contains the top and bottom margins of the first box (that is, the gray part of the first row) formed by span, and the right and bottom padding edges of the last box (the last line of gray) of the span generated by the left.

The inclusion blocks formed within the inline elements are different in each browser, and there is a compatibility issue. This can be demonstrated by the example above. The location of the blue "XX" is different in each browser.

The width of the containing block may be negative.

Example code:

<p Style="border:1px solid red; width:200px; padding:20px; " >Text text text<span style="Background-color: #C0C0C0; position:relative; " >This text is arranged from left to right, Red xx and blue xx and yellow xx are absolutely positioned elements, and its containing blocks are relatively positioned span. They can be judged by their absolute position to contain the edges of the block.<em style="Position:absolute; color:red; top:0; left:0; " >Xx</em>        <em style="Position:absolute; Color:yellow; top:20px; left:0; " >Xx</em>        <em style="Position:absolute; Color:blue; bottom:0; right:0; " >Xx</em>    </span></P>


The above boundary cannot be enclosed in an area, in which case the width of the containing block is negative.

2). If ' direction ' is ' RTL ', contains the top of the block, the right side is the top of the first box generated by the ancestor element, the right padding boundary (padding edges), left and bottom are the left and bottom padding boundaries of the last box generated by the ancestor element (padding edges)

Example code:

<p Style="border:1px solid red; width:200px; padding:20px; Direction:rtl; " >T<span style="Background-color: #C0C0C0; position:relative; " >This text is arranged from right to left, Red xx and blue xx and yellow xx are absolutely positioned elements, and its containing block is relatively positioned span. They can be judged by their absolutely positioned position ...<em style="Position:absolute; color:red; top:0; left:0; " >Xx</em>        <em style="Position:absolute; Color:yellow; top:20px; left:0; " >Xx</em>        <em style="Position:absolute; Color:blue; bottom:0; right:0; " >Xx</em>    </span></P>


In other cases, if the ancestor element is not an inline element, then the area containing the block should be the inner margin boundary of the ancestor element

CSS3 inclusion block and its locating decision

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.