CSS2.1SPEC: Detailed description of width attributes of the visual formatting model (bottom), css2.1specwidth
This article undertakes CSS2.1SPEC: detailed explanation of width attributes of the visual formatting model (I), and continues to analyze the calculation of width and related values in the CSS visual formatting model:
Note: Unlike the previous section, the demo in this section shows float, absolute, and other positioning methods, so in order to facilitate the display of results, all the demos set the margin attribute of the body to 10px, and added a div element whose class is container. It has 10px padding, 3px border, and 500px width, set float: left, _ zoom: 1 to form a BFC to clear the float.
2.2.5 non-replaceable floating Element
First, the auto values of margin-left and margin-right are set to 0. Then, the width of the element is calculated based on the "shrink-to-fit" method. Let's take a look at the calculation process of the "shrink-to-fit" algorithm: [1] calculating preferred-width: If the contained content contains a clear line break (for example, when there is a <br/> label), otherwise it will not wrap the line, the width required to accommodate the content it contains. [2] calculating preferred-min-width: When a row can be changed (when a space or punctuation mark is encountered in English, block-level elements appear, of course, the <br/> label also appears) in the case of line breaks, the width required to accommodate the contained content. [3] calculate available-width: the formula in section 2.2.3 is used: available-width = width of containing block-'margin-left'-'border-left-width'-'padding-left'-'padding-Right'-'border-right- width'-'margin-right, it also includes the width of all scrolling out. The final width is: min (preferred-width, max (preferred-min-width, available-width )). The final formula can be summarized as follows: The final width is based on available-width, and cannot be greater than preferred-width or less than preferred-min-width.
Available-width should be easier to understand, but preferred-width and preferred-min-width are not easy to understand. Let's analyze them through DEMO:
# DEMO 1 shrink-to-fit algorithm Example 1We have the following code:
<div class="container">
<div style="float: left;border: 1px solid #f00;">
</div>
</div>
We know that line breaks are not allowed when there are no spaces or punctuation marks in English, and the length of the word here must exceed PX. Let's take a look at the effect:
Note: The display effect of this demo in IE6 may be somewhat different, because the width attribute of the box is defined in IE6 in time, but it may still be extended by the content, this topic will be introduced later in this article. Because line breaks are not allowed for English words, preferred-min-width and preferred-width are the same here, that is, how long is this "word, so what are the two width values? Here it is 756px (and the border of 1px on the left and right), and available-width is obviously the width of the contained block. Here it is 500px, after calculation, the final width value is 756px.
# DEMO 2 shrink-to-fit algorithm Example 2Modify the code in DEMO1, that is, add a few spaces to the "word" in DEMO1:
<
Div
Class =
"Container">
<
Div
Style =
"
Float:
Left;
Border: 1
Px solid
# F00;
">
</
Div>
</
Div>In this way, it becomes an English sentence and line breaks are allowed in the blank space. We can see the final display effect:
Mark each width:
First, the auto values of margin-left and margin-right are set to 0.
The calculation of the width attribute is the same as that of the in-row replacement element. For details, see section 2.2.2.
For ease of display, we have set the height value of PX for the container. It must be clear that for an absolutely positioned element, if its contained block is generated in a block container box, the width of the contained block is formed by the padding edge of the box. If it is a row element, it is formed by the area surrounding the row box. In addition, it may be the initial inclusion block, for details, see section 3.3 of CSS2.1SPEC: Inclusion block of a visual formatting model. In this and next sections, you must first clarify the concept of "static position": the term "static position" (of an element) refers, roughly, to the position an element wocould have had in the normal flow. that is, "static position" refers to the position where the first element in a normal stream should be located (the position attribute of this element is "static" and there is no float ), this element is actually a hypothetical element. In addition, the "left" value refers to the distance from the left margin of the block to the left margin edge (left margin edge) of the box generated by the absolute positioning element. "Right" refers to the distance from the right margin of the block to the right margin (right margin edge) of the frame generated by the absolute positioning element. The following demo demonstrates the "static position" when the direction of a block is the default ltr ":# DEMO 3 "static position" DescriptionThe Code is as follows:<div class="container">
<div style="width: 100px;height: 100px;background: #34538b;">
</div>
</div>
Our container has a 10px padding. For block-level elements in a normal stream, in the horizontal direction, the default value is to stay close to the left side of the content area containing the block, the distance between this position and the content area padding edge is padding-left. It is also pointed out that the user agent does not have to calculate the size of the hypothetical box.
The content of this section must be based on the following equations: 'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-Right' + 'border-right-width '+ 'margin-Right' + 'right' = width of ining block
IF: left, right, and width values are both auto, set auto of margin-left and margin-right to 0 first. IF the direction attribute of a block is ltr, set the left value to the position of "static position" and calculate the values of width and right according to Rule 3 below. If the rtl ction attribute of the contained block is rtl, set the right value to the position of "static position" and calculate the left and width values according to Rule 1 below. [1] = "else if: left, right and width values are not auto. IF both margin-left and margin-right are auto, then they will have the same value and must make the equation true to achieve the center effect. However, if the obtained margin value is negative, you need to set margin-left to 0 when the ction attribute of the contained block is ltr, and calculate the value of margin-right according to the equation. Otherwise, set the value of margin-right to 0, and then calculate the value of margin-left according to the equation. [2] = "else if: margin-left or margin-right has only one auto, then the auto value is calculated according to the equation. [3]
= "Else if: IF all values are not auto (over-constraints), the right value is ignored when the direction attribute of the block is ltr, right is re-calculated according to the equation. Otherwise, the left value is ignored and re-calculated according to the equation. [4]
= "Else if: IF none of the above conditions are met, set all auto values of margin to 0 and then calculate according to the following rules. [5] rules:[1]:If left and width are auto, calculate the width value based on the "shrink-to-fit" algorithm, and then calculate the left value based on the equation.[2]:If both left and right are auto, but width is not auto, left is set to "static position" if the direction attribute of the contained block is ltr, then the right value is obtained based on the equation. Otherwise, the right is set to the position of "static position", and the left value is obtained based on the equation.[3]:If width and right are auto, calculate the width value based on the "shrink-to-fit" algorithm, and then calculate the right value based on the equation.[4]:The rules 4, 5, and 6 in the original standard can be classified as one. If left, right, and width have only one auto value, the auto value is calculated based on the equation.
# DEMO 4 where both width, left and right are autoThe Code is as follows:
<div class="container">
<div style=height: 100px;background: #34538b;position: absolute">
</div>
</div>
In demo4, we define an absolute positioning element, and width, left, and margin are both default auto values, we can see that the width of the element is obtained according to "shrink-to-fit", and the left value is set to the position of static position. Here it is actually the padding-left: 10px that contains the block. Put the right value. Although the browser's debugging tool does not provide the used value of the specific right value, there is still reason to believe that the browser will calculate the corresponding value according to the Standard Rules.
# DEMO 5 where neither width, left or right is autoModify the code in demo4, set the explicit values of width, left, and right for the absolute positioning element, and set the auo value for margin-left and margin-right:
<div class="container">
<div style="width:100px;height: 100px;background: #34538b;position: absolute;left: 0px;right: 0px;margin-left: auto;margin-right: auto;">
</div>
</div>
We can see that when width, left, and right are not auto and the horizontal margin is auto, the layout is divided into margin-left and margin-right, this can also achieve the effect of element center. Note: IE6/7 does not calculate the margin value according to this rule, but directly sets the auto of margin to 0 and then calculates it.
Let's modify the code to see if only one margin value is auto:
<
Div
Class =
"Container">
<
Div
Style =
"
Width100
Px;
Height100
Px;
Background:
# 34538b;
Position:
Absolute;
Left: 0
Px;
Right: 0
Px;
Margin-left:
Auto;
Margin-right: 0
Px;
">
</
Div>
</
Div>We set margin-right to 0px and margin-left to auto. The result is as follows:
We can see that the value of margin-left is calculated based on the formula. Note: IE6/7 also sets the auto value of margin to 0, and then calculates the value of right under the constraints, the display effect is as follows:
This also verifies the rule that the right or left values under the constraints are recalculated.
During calculation, the replacement element with absolute positioning applies to "static position" and equations in the previous section, but the computing logic is different, as shown in the following code: = "IF: width is calculated based on the "calculation rule for the width value of an inrow replacement element. If the calculated values of margin-left and margin-right are both auto, their usage values are calculated according to the following rules. [1] = "else if: left, the calculated values of right are all auto, when the direction attribute of the block is ltr, you need to set left to the left position of "static position"; otherwise, the right value is set to the right position of "static position. [2] = "else if: left or right is auto, set the auto values of margin-right and margin-left to 0. [3]
= "Else if: at this time, IF both margin-right and margin-left are auto, they will have the same values and must make the equation true, so as to achieve the center effect. However, if the obtained margin value is negative, you need to set margin-left to 0 when the ction attribute of the contained block is ltr, and calculate the value of margin-right according to the equation. Otherwise, set the value of margin-right to 0, and then calculate the value of margin-left according to the equation. [4]
= "Else if: IF only one value is auto at this time, then calculate the auto value according to the equation [5] =" else if: IF a constraint is formed at this time, when the direction attribute of a block is ltr, the right value is ignored and the right value is recalculated based on the equation. Otherwise, the left value is ignored and recalculated based on the equation. [6]
2.2.9 non-replaced intra-row BlocksThe element whose display attribute is "inline-block" forms a intra-row block. Based on the rules we have learned, for intra-row blocks, when calculating the margin-left, margin-right and width are easier. In fact, its calculation rules are basically the same as those of floating elements.
2.2.10 intra-row block replacement ElementsThe calculation method for intra-row block replacement elements is the same as that for intra-row replacement elements in section 2.2.2.
3 min-width and max-width
3.1 min-width and max-width attributesThe definition of min-width and max-width in CSS standards is as follows:
These two properties allow authors to constrain content widths to a certain range. these two attributes allow developers to limit the width of a box to a range, that is, within the range of [min-width: max-width. Same as the width attribute, these two attributes are not applicable to non-replaceable elements in the row, table rows and table row groups, and do not have inheritance. You can take absolute length values, you can also use percentages. These attributes are similar to width attributes, and negative values are not allowed for both attributes.
3.2 min-width, max-width usageThe specific effects of min-width and max-width on width values are as follows:
[1]:First, the width value and related margin, left and right values are calculated based on the rules described in section 2.
[2]:If the calculated width value is greater than the max-width value, use the max-width value as the width value and bring it into the calculation rule for calculation.
[3]:If the calculated width value is smaller than min-width, use min-width as the width value, and then compress it in the calculation rule. Next we will use an example to illustrate how to use max-width as an example:
# DEMO 6The code for using max-width is as follows:
<div class="container">
<div style="height: 100px;background: #34538b;max-width: 400px;">
</div>
</div>
We define max-width as 400px for div. If we do not define this attribute, since the width value is auto here, the width value should be the same as the content edge width of the contained block, it is 500px, but because we have limited max-width and 500px> 400px, the final width value is 400px, then, we bring this value into the rules in section 2.2.3 to form an over-constraint condition. Therefore, we ignore the root equation of the margin-right Value and re-calculate it to get the margin-right: 100px.
