Rules for calculating horizontal areas of block-level non-replacement elements in a CSS document flow (1)

Recently reading Basic Visual formatting in CSS, combined with the previously seen CSS authoritative guide and CSS standards. Just make a note today.
Before encountering some of the width is not clearly specified in some of the layout, although the feeling can guess a ballpark, but always a bit not very reliable. Until recently saw this book, feel always feel very good.

The first thing to know is that in addition to the properties of block, inline, and inline-block that are specified by the display, there is a feature that can be substituted or not replaced.

Replacement elements: The content specified by the stable species like IMG, video, and canvas is only a placeholder, and the real content is replaced. Like IMG content is replaced after the picture loading is complete.
Non-replacement elements: things like Div, p, span are written in the document.
The main thing to be said here is that the block-level non-replacement elements are display:block non-replacement elements, such as P, Div, and display:list-item, such as Li. Although Li looks like the display and Div, p These are two categories, but in fact, Li in addition to the front of the logo, the other behavior is basically the same.

To get to the bottom, the horizontal formatting of block-level non-replacement elements in the document flow and the inclusion block (containing block) are also related to seven properties (Border-left, Margin-left, Padding-left, width, padding-right , Margin-right, Border-right). Containing blocks of block-level elements in a document flow generally refer to the content area of the parent block-level element. That is, when Box-sizing:content-box, the width of the specified area. Here's a formula:

' Margin-left ' + ' border-left-width ' + ' padding-left ' + ' width ' + ' padding-right ' + ' border-right-width ' + ' margin-right ' = Width of containing block

　　The above formula will be set up in all cases. But soon the question came, and if I set the value of the 7 attributes, but not the width of the containing block, or if I set the value to auto, then how to calculate it? In fact, in these seven values, only three values Margin-left, Margin-right, and width can be set to auto. Let's first look at the case where the three properties are set to auto, since these three properties can be set to auto or non-auto, that means there are 23, 8 cases. Here are the separate sections:

1, a value is set to auto, that is, Margin-left, margin-right, or width is set to auto. These three kinds of situations are the simplest, the direct set of the above formula is known.

2, two values are set to auto.

2.1, Margin-left, and Margin-right are set to Auto,width to specify a value other than auto. This is where our normal level is, margin-left and margin-right get the same value.

2.2, Margin-left, and width are set to Auto,margin-right to specify a value other than auto. The margin-left is reset to 0, and then it becomes a 1 situation.

2.3, Margin-right, and width are set to Auto,margin-left to specify a value other than auto. The margin-right is reset to 0, and then it becomes a 1 situation.

3, three values are set to auto. Both Margin-left and margin-right are reset to 0 and then calculated as a result.

4, if there is no one set to auto, in the CSS called "over-constrained" (excessive constraints). Then the value of Margin-right is ignored when the document flow direction is left to right, and then it is 1. This is the easiest thing to understand, it's easy to understand that "over-constrained" is understood to specify all values so that the upper left side of the formula is less than the right. The correct understanding should be "specify three values, there is no room for flexibility." So as long as the margin-left, width and margin-right are given a value other than auto (even 0), it is "over-constrained".

the above content seems to have covered all the situation, in fact, there is a special case is margin-left,margin-right set to Auto,width has a specified value, but border-left+padding-left+ width+padding-right+border-right> width of containing block. According to the above, Margin-left and margin-right get the same value, but the fact is that Margin-left and margin-right are reset to 0, then over-constrained, then ignore one.

Rules for calculating horizontal areas of block-level non-replacement elements in a CSS document flow (1)