CSS2.1SPEC: Inclusion block of the visual formatting model,

CSS2.1SPEC: Inclusion block of the visual formatting model,
The original style is the most delicious. When reading CSS standards, I have a deeper understanding of this, one of the major feelings after reading the document is that many styles that seem to be appropriate also have corresponding support mechanisms. This article begins with the inclusion block. On the one hand, it summarizes the corresponding descriptions in the standard and analyzes the specific information based on specific instances, especially IE6/7, which does not fully support CSS2.1. As we have a little experience, there must be some problems in this article. I hope you can forgive me and point out the problems. Before reading this article, you should have a more accurate understanding of the various boxes (boxes can also be boxes) generated in the CSS box model and visual formatting model and various layout methods, you can read two articles by Du Yao. These two articles are also the translation and elaboration of the relevant chapters in the standard. (1) Various boxes in the visual formatting model (2) Replace and non-replace elements or directly read related chapters in CSS2.1 SPEC: (1) Box model (2) before introducing the Visual formatting model, I 'd like to briefly describe the Visual formatting model.1. CSS visual formatting ModelThe visual formatting model described in the standard is: how user agents process the document tree for visual media. that is, how does a User Agent process the document tree in visual media? The most common user agent is a browser, what is responsible for page parsing and rendering is the rendering engine of the browser (now more directly called the browser kernel). Documents can include HTML documents and documents written by other General Markup languages. In the visual formatting model, each element in the Document Tree generates 0 or more boxes based on the box model. The following factors affect the layout of the box: (1) the size and type of the box. For example, the layout of the block-level box and the row-level box are different. (2) The box positioning method. The display attribute is definitely the box positioning method generated by an element. The boxes with different positioning methods also have different rules in layout. (3) Relationship with other boxes. If there are two boxes, the layout generated by the two boxes is different, including the relationship or peer relationship. (4) other additional information (such as the size of the viewport and the inherent size of the replacement element) from this perspective, the visual formatting model is a detailed description of how these factors affect the layout of a box.2. viewport)In the first part, the word "View" appears. intuitively, I think the view can be understood as the area where the user agent is used to present the parsed and rendered document tree, you can read the document content in this area. In a browser, the view is generally the area where the browser is used to present the webpage. In the standard, the view is described as follows:

User agentsContinuous mediaGenerally offer users a viewport (a window or other viewing area on the screen) through which users consult a document.

Note that the bold continuous media means that the webpage we browse is a continuous media, and the document content printed through the printer must be paginated, so it is a paging media, paged media ). When a webpage is a continuous media, the problem arises. It cannot change with the size of the webpage. Therefore, when the size of the browser is smaller than the size of the document, a scroll mechanism must be provided, the most common is the browser's scroll bar. Through the scroll bar, we can browse the Document section beyond the view, which is described in the document:

When the viewport is smaller than the area of the canvas on which the document is rendered, the user agent shocould offer a scrolling mechanism.

Of course, the knowledge about the view is not just that simple. For example, in mobile web, the attributes of the viewport are crucial for mobile web development. However, this article does not cover other knowledge about the view. 3. Contain Blocks)A webpage consists of boxes. Each frame has its own size, position, and other rendering attributes (such as the background color and font ), how are the positions of these boxes determined during layout? In addition, if no Display dimensions (width, padding, border, margin) are defined for the box, how are their sizes determined? The key point of the answer is the inclusion block. I personally think that the inclusion block is the basis for learning CSS layout. But fortunately, this concept is not hard to understand. First, let's take a look at The description of The Inclusion block in The standard: The position and size of an element's box (es) are sometimes calculated relative to a certain rectangle, called the containing block of the element. that is to say, the positions and sizes of various boxes produced in the visual formatting model are usually calculated based on the edge of a specific rectangular box. This rectangular box is the inclusion block of this box. Note: If a frame contains a block, it refers to its contained block, rather than its contained block. How can we determine the contained block of a box? The Standard specifies the corresponding rules: Contains 3.1 ElementsThe inclusion block of the root element (HTML is the html Tag) is called the initial inclusion block: for continuous media (such as web pages ), it has the size of the view and is located at the origin of the canvas (it can be intuitively understood as the start position of the content of the view. If the direction attribute of the initially contained block is ltr, the start position is the upper left corner of the view, if it is rtl, it is in the upper right corner of the view ). The direction attribute of the initial inclusion block is the same as that of the root element. The default value is ltr, that is, left to right. Note: The initial inclusion block has the size of the view, that is, the width and height are the same as those in the view, even if a scroll occurs in the view.

3.2 contains blocks when the element is positioned as static (default) or relative (relative layout)

For elements whose positioning attribute is static (default) or relative (relative layout), its contained block is composed of the content area of the most recent ancestor block container box. This is also easy to understand. Although there are two words: block container box and content area, you should be able to understand the various boxes in the CSS box model and visual formatting model. The following is a simple example: # DEMO 1: Contains block CSS code for elements located in static or relative:

.container{
    width: 1000px;
    margin: 50px auto;
    border: 2px solid #000000;
    padding: 50px;
}

HTML code:

<DivClass ="Container"Style ="">
<DivClass =Static-div-1"Style ="Background:# CCCCCC;">
Static positioning Element
</Div>
</Div>

The container with a black border has a 50px padding, you can see that class is the static-div-1 element is located based on the content area of the container, IE6/7 also follows the standard.
  3.3 contains blocks when the element is located as absolute  For an element whose position is absolute, its contained block is generated by the latest element with a non-static location attribute (I .e., position is relative, absolute or fixed). There are two situations: <1> if this element is a block container box element, the contained block is formed by the padding edge of the element. <2> if this element is a row element, the contained block is formed by the box that enclose the first row box and the last row box of the row's internal elements. If an element in a row is divided into multiple rows, blocks in CSS2.1 are undefined. If such an ancestor does not exist, the contained block is the initial inclusion block. Note: The Case of the absolute in the paging media is not discussed in this article, take the following example: # DEMO 2: absolute positioning of the element's inclusion block (1)-block container box to form the inclusion BlockCSS code:

.container{
     width: 1000px;
     margin: 50px auto;
     border: 2px solid #000000;
     padding: 50px;
     position: relative;
 }
.absolute-div-1{
    position: absolute;
    left: 0px;
    top: 0px;
}

HTML code:

<DivClass ="Container">
<DivClass =Absolute-div-1">
Elements positioned by absolute
</Div>
</Div>

The effect is as follows:

It can be seen that the element of the absolute-div-1 is absolute positioning, and the positioning start point is 0px on the left, 0px on the top, although the container has 50px padding, but because the absolute positioning element is based on the block container box padding edge to locate, so the absolute-div-1 is still close to the upper left corner of the display. # DEMO 3: absolute positioning of the element's inclusion block (2)-in-row elements form the inclusion BlockIn DEMO3, we replace container with the line element span. to display the effect more clearly, we add a height to the body and set the background color, and set a different font color for span and absolute-div-1, the Code is as follows CSS code:

body{
     margin: 0px;
     font-size: 14px;
     height: 500px;
     background: #a0b3d6;
 }
 .container{
     margin: 50px auto;
     position: relative;
     color: #eeeeee;
 }
.absolute-div-1{
    position: absolute;
    color: #ff0000;
    left: 0px;
    top: 0px;
}

HTML code:

<SpanClass ="Container">
The row level includes the block level. The block level includes the block level. the row level contains the block level.
The row level includes the block level. The block level includes the block level. intra-row level include intra-row level include
The row level includes the block level. The block level includes the block level. intra-row level include intra-row level include
The row level includes the block level. The block level includes the block level. intra-row level include intra-row level include
<DivClass =Absolute-div-1">
Elements positioned by absolute
</Div>
</Span>

Effect: in IE6/7, the effect is the same. We also mentioned that if an element is a row-level element, the contained block is formed by the box that enclose the first row box and the last row box of the row's internal elements. Let's verify the description of the red part, that is, to change the top position of the absolute-div-1 to bottom, that is, bottom: 0px, the effect is as follows: this also verifies the content described in the standard. Note: in IE6, if the absolute positioning element only uses bottom to locate, but the element containing the block does not trigger hasLayout, bottom will not locate it based on the bottom of the contained block. This bug uses zoom: 1. attributes such as hasLayout can be solved. # DEMO 4: absolute positioning of the element inclusion block (4)-the line element is divided into multiple rows As described in the visual formatting model, if a row-level element contains a block-level element, the row-level element is divided into two parts and becomes a block-level element. Modify the container in DEMO3:< Span Class = "Container">

The row level includes the block level. The block level includes the block level. the row level contains the block level.
The row level includes the block level. The block level includes the block level. intra-row level include intra-row level include
<DivStyle ="Background:# Eeeeee"> A div is displayed in the middle. </Div>
<DivClass =Absolute-div-1">
Elements positioned by absolute
</Div>
The row level includes the block level. The block level includes the block level. intra-row level include intra-row level include
The row level includes the block level. The block level includes the block level. intra-row level include intra-row level include
</Span>

At this time, the effect varies in different browsers: the effect in IE6 + and firefox is: the effect in chrome is: we can see that, in chrome, the absolute positioning element is located based on the second box formed after the split. If we move the absolute positioning element before the split element, that is:

<SpanClass ="Container">
The row level includes the block level. The block level includes the block level. the row level contains the block level.
The row level includes the block level. The block level includes the block level. intra-row level include intra-row level include
<DivClass =Absolute-div-1">
Elements positioned by absolute
</Div>
<DivStyle ="Background:# Eeeeee"> A div is displayed in the middle. </Div>
The row level includes the block level. The block level includes the block level. intra-row level include intra-row level include
The row level includes the block level. The block level includes the block level. intra-row level include intra-row level include
</Span>

Then the effect in chrome becomes:

It can be seen that the location in chrome is related to the location of the absolute positioning element in the code. # DEMO 5: absolute positioning of the element's inclusion block (4)-initial inclusion block as the inclusion BlockIf an absolute positioning element finds its ancestor with a non-static positioning attribute, the initial contained block is used as its contained block. Here, we need to note that the size of the contained block is initialized, as mentioned in section 2.1, the initial inclusion block has the size of the viewport. Even if there is a scroll, the DEMO code is as follows: CSS code: to scroll, we add a 1000px height to the body.

.body-for-demo4{
    height:1000px;
    background: #a0b3d6;
}

.absolute-div-2{

    height: 100px;
    width: 100px;
    background: #03a9f4;
    position: absolute;
    bottom: 0px;
    left:0px;
}

HTML code:

<body class="body-for-demo4">
    <div class="absolute-div-2">
    </div>
</body>

The effect is as follows:

As you can see, although the height of the body exceeds the initial inclusion block so that the scroll bar appears, the size of the initial inclusion block is not changed. If we set a position: relative attribute for the body, the absolute positioning box will go to the bottom of the page.
2.4 contains blocks when the element is positioned as fixed   When the element positioning attribute is fixed, for continuous media, the inclusion block is formed by the viewport, for paging media, it is formed by the page area.The element whose position is fixed does not scroll along with the page. Its contained block is formed by the viewport, which is also easy to understand. However, IE6 does not support fixed attributes. You can use css expressions or hack to enable IE6 to support fixed. See: http://caibaojian.com/468.html

In addition, examples of blocks are included in Chapter 10th of the original document of CSS2.1. Examples in the standard are more basic and can also be referenced.