CSS2.1SPEC: Detailed description of width attributes of the visual formatting model (I) and css2.1specwidth

CSS2.1SPEC: Detailed description of width attributes of the visual formatting model (I) and css2.1specwidth
After introducing the inclusion blocks, the width and height attributes are introduced in the CSS2.1 standard. These two attributes play an important role in our page layout. In the box model, width and height enclose the content area of a box ), whether an explicit definition is available, the type of the box, the layout of the box, the relationship between the box and other boxes, and other additional information will affect the final width and height values of a box, this article first introduces the width attribute and Related Algorithms for determining the width value in the visual formatting model.
1 width attribute profiling
Contains the block width. However, if the width of the contained block is determined based on the content, the final layout is undefined, that is, the standard does not explicitly specify how to calculate the width value. In addition, if the box is absolutely positioned, the percentage length is calculated based on the width of the padding edge containing the block. Note: If the width of an element is a percentage value and the width of the contained block needs to be determined based on the content of the contained block, different situations and different browsers have completely different results. Therefore, we recommend that you do not use percentages to define width values during layout. The specific rules still need to be summarized. If you have studied them, share them with others. (3) auto: calculated based on the width calculation method specified in the CSS standard. The specific algorithm is described in detail below (4) inherit: in fact, the width attribute cannot be inherited, it is strange why the inherit option is available. In actual conditions, the width attribute rarely uses the inherit value. The default value is auto.1.2 Applicable ElementsWidth applies to all other elements except non-replaceable row elements (by default, span, em, and other elements), table row (tr), and table row group (tbody) elements. For example, if we set a width for span, this width will not produce any effect unless we change the display attribute of span to inline-block or block. As mentioned in 1.1, the width attribute cannot be inherited.
2 Calculation of width, left, right, margin-left, margin-right
2.1 default values of several attributesIn the css box model, attributes that affect the space occupied by a box on the page include width, height, margin, border, and padding. In addition, left, right, the top and bottom values also affect the position of the box on the page under certain conditions (position is not static. If we define a specific value (value or percentage) for these attributes, the final used value is the specific value (for height and width, it may also be affected by the max or min value ). This article only discusses attributes that affect the size and position of element frames in the horizontal direction (width, margin-left, margin-right, padding-left, padding-right, border-left- width, border-right-width, left, right)
By default, values of margin-left and margin-right are also 0, but they have auto values.
The default values of width, left, and right are auto. By default, the css auto value is used to calculate the final value, by default, how to calculate the auto value is the content that will be highlighted below.
2.2 Calculation of several dimension and position attribute valuesFirst, let's take a look at The standard description: The values of an element's 'width', 'margin-left', 'margin-right ', 'left' and 'right' properties as used for layout depend on the type of box generated and on each other. (The value used for layout is sometimes referred to as the used value) In principle, the values used are the same as the computed values, with 'auto' replaced by some suitable value, and percentages calculated based on The containing block, but there are exceptions. that is to say, the width, margin-left, margin-right, left, and right attributes used by elements depend on the types of the boxes they produce and their relationships. In general, the final value used is the same as the calculated value: that is, auto is replaced with the appropriate value, and the percentage is calculated based on the included block. However, there are exceptions, and exceptions are the focus.
Note. the used value of 'width' calculated below is a tentative value, and may have to be calculated multiple times, depending on 'min-width' and 'max-width ', see the section Minimum and maximum widths below. that is to say, the calculated width value is an uncertain value, because the width may also be affected by the min-width or max-width value, which will be introduced at the end of this article.
Note: In order to display the effect, all the demos in this article assign the 10px margin, 10px padding, and 3px border to the body.2.2.1 non-replaceable intra-row ElementsFor non-replaceable row elements, the auto value of margin is assigned 0, while the width attribute is not applicable. For a non-replaceable Row Element, its actual width depends on its actual content (generally text), and it is also subject to word-break, influence of word-wrap and white-space attributes. Here is an example:# DEMO 1 non-replaceable element width in a rowThere is a span as follows: <Body> <Span> Zookeeper </Span> </Body>

We know that if there are no spaces or punctuation characters in English characters, line breaks are not allowed. Therefore, we can see that the width of the span is:
We can see that the span width is 1736px, and the effect is the same in IE6 +. If you add a css attribute, word-wrap: break-word, for span, we know that after adding this attribute, you can force line breaks for English words. The effect is as follows:
Because the width of the box inside the row is given by the inclusion block, when the boundary of the content area of the body is reached, the boundary of the row box is reached, because we have added word-wrap: after break-word, force line feed is allowed. Therefore, a line break occurs when the edge of the line box is reached, and the width of the line element span is the same as that of the line box.
2.2.2Intra-row replacement elementThe content of the replacement element is not controlled by the CSS rendering model and often has an inherent size. When calculating the width of the box generated by the Displacement Element in the row, consider the inherent size of the Displacement Element. First, the auto value of margin is assigned 0.
IF: height and width are both auto, but the element has an inherent width, the inherent width is the value of width, such as the text input box (input [type = text]), if its width and height are both default auto values, the final width is its inherent width, but this width value may be different in different browsers. [1] = "else if: width is an auto value, but the element has an inherent aspect ratio, and the height has an exact value (or an inherent height ), the value of width is: (used height) * (ratio) [2] =, else if: both width and height are auto, and the element has an inherent aspect ratio, but there is no inherent width or height, so the width of the element is undefined. (In this case, CSS2.1 recommends calculating the block-level non-replaceable element width value in a normal stream based on the content-independent width of the contained block, see section 3rd in this chapter) [3] = "else if: the width attribute of an element is auto, but it has an inherent width value, the inherent width value is the use value of the element width [4] = "else if: the width attribute of the element is auto, but none of the above conditions match, the width is PX. If PX exceeds the width of the user proxy, the user proxy should use the width of the maximum rectangle that can be accommodated as the width value, and the aspect ratio of this rectangle is. Typical examples include canvas and iframe. [5]# DEMO 2 iframe width
The following code is available:

<body>

<iframe src="../fixed.html"></iframe>

</body>

The result is as follows:
We can see that the display width is PX and the height is PX.
2.2.3 block-level non-replaceable elements in a normal streamThis situation is often encountered during layout. When we add a div to the body, what is its width? Why can't the div of two normal streams be displayed in the same row? After learning the content of this section, you can answer these two questions.
'Margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-Right' + 'border-right-width' + 'margin -right '= width of containing block
If width is not auto, and 'border-left-width' + 'padding-left' + 'width' + 'padding-Right' + 'border-right-width' (plus all non-auto margin) if the value is greater than the width of the contained block, all auto values of margin-left and margin-right are regarded as 0 in the following calculation.
IF: IF none of the above values are auto, this situation is called "over-constraint". In this case, the value of one attribute will be different. If the direction attribute of the contained block is ltr, the margin-right is ignored, and other values and the preceding equations are used to calculate the value of margin-right. If it is rtl, re-calculate the value of margin-left. [1]
# Re-calculate the margin value under the constraints of DEMO 3
We have the following code: <Body> <DivStyle ="Width100Px;Height: 30Px;Border: 1Px solid# F00;"Id ="Div"> </Div> </Body> In this case, the element is displayed as follows:
Let's modify the code to explicitly add a margin-right for the element: <Body> <DivStyle ="Width100Px;Height: 30Px;Border: 1Px solid# F00;Margin-right200Px"Id ="Div"> </Div> </Body>

<BodyStyle ="Direction:Rtl"> <DivStyle ="Width100Px;Height: 30Px;Border: 1Px solid# F00;"Id ="Div"> </Div> </Body>
The explicit effect also complies with the standard, and IE6 + complies with the standard.
= "Else if: IF there is only one auto value in the above values, the auto value is calculated according to the formula [2].
# DEMO 4 only has one auto Value
We have the following code:

<body>

<div style="width: 100px;height: 30px;border: 1px solid #f00;margin-left: auto;" id="div"></div>

</body>

In this case, only the value of the margin-left attribute is auto (auto by default). Let's take a look at the effect:
The margin-left value of the element is equal to the width of the contained block-border-left-width-border-right-width
= "Else if: width is auto, then all other auto values are set to 0, and width is calculated according to the equation. [3] = "else if: margin-left and margin-right are both auto, their use values will be the same, and the final result will center the block generated by this element. In fact, this is our commonly used margin auto center solution. [4] we use a DEMO to demonstrate this effect:# DEMO 5 where width is auto and margin-left and margin-right are both auto
We have the following code:

<div style="width:auto;margin-left: auto;margin-right:auto;height: 30px;border: 1px solid #f00;" id="div"></div>

Display Effect:
Rule 3 is verified, that is, if width is auto, all other auto values are set to 0 and the width value is calculated using the equation.
2.2.4Block-level replacement elements in a normal stream
For block-level replacement elements in a normal stream, the width value is still calculated according to the rules in section 2.2.2. After obtaining the width value of the replacement element, the margin value is calculated according to the rules in section 2.2.3. We use an instance for verification:# DEMO 6 block-level replacement element width and margin in a normal streamWe have the following code: <Body> <InputType ="Text"Style ="Margin:Auto"/> </Body> Effect:
Because input is not a block-level element by default, but a row-level element, it does not comply with Rule 4 in section 2.2.3. Let's modify the code and add a display for the input element: block style to make it a block-level element: <Body> <InputType ="Text"Style ="Margin:Auto;Display:Block"/> </Body> Effect:
We can see that the input element is centered.