Front-end: Try to understand the CSS box model from a new perspective (2) and understand css in Depth

Front-end: Try to understand the CSS box model from a new perspective (2) and understand css in Depth

Next.
In the rectangle area, only margin can take negative values, only width and margin can take the auto keyword, border cannot be a percentage, and other attributes can only take a positive number or a positive percentage. The value set by margin and padding is the vertical height of a block area. The length and width of this area change with the width and height of the content. Border sets its own width, and its length also changes with the length of the corresponding edge. The values of padding and border are not automatically changed according to certain conditions, and will not be changed once set. Although the value of margin can be changed automatically, the conditions for changes are generally limited in space. Only the width and height attributes can be changed based on content changes, provided that the values of width and height are auto. Next we will discuss it separately based on the block level and in-row mode, and in various cases we will discuss it separately based on the horizontal and vertical directions.
1. Block-level rectangular area:
In the horizontal direction, if the width is not set to a fixed value, that is, when the value is auto, the width property tends to be as wide as possible. For example, if both width and margin are set to auto, then, the value of margin is reset to 0 by the browser. If a fixed value is set for width, its value is fixed, whether or not the document flow is out of the content zone of the parent element or not.

1. when width is set to auto, there is a principle in this case: If the content area is in the layout context (the content area of the parent element), its width will be as large as possible. If the content area is greater than the layout context because of the positive margin, or the padding and border are greater than the layout context width, the width value is 0, although the width is 0, the content still exists and the attribute values of padding and border remain unchanged. However, when both padding and margin exist, the positive margin-right cannot leave the rectangular area of the element from the content area of the parent element, the value is too large. While the positive value margin-left can be the rectangular area of the element that leaves the content area of the parent element. Another special principle is that when the margin value is negative, the negative value produces a result that the content area passes through the layout context and moves the corresponding distance to the outside of the layout context. When one side of the margin is negative, there are three possible cases: The Other Side of the margin has no value, the other side of the margin has a positive value, and the other side of the marging has a negative value. When there is no value in the margin on the other side, the width will always extend. When the other side of the margin has a positive value, the width is automatically adjusted based on the positive value and the negative margin position and the positive number margin position as both sides of the content area, when the position of the positive number margin extension overlaps with that of the negative number margin, the width changes to 0. When the margin value on the other side is negative, the two sides of the content area extend to the left and right sides of the layout context.
2. When the width is set to a fixed value, this situation seems to be less complex. After all, you can change the number by yourself, leaving only margin. At this time, if you add both sides of the content area, there will be no conflict, but if you add both sides of the content area, there will be a conflict. Because width is fixed, if one side of the margin is fixed, the other side of the margin is also fixed, but the other side of the fixed value is probably not the value you set. At this time, this rectangular area will be restricted. The first processing method is to have a priority. If the left and right margin conflict with each other, the priority is given to the left margin. If the upper and lower margin conflict with each other, the above margin is given priority. If the two sides are negative margin with fixed width, the elements move to the left first. A special usage is about horizontal center. When the left and right sides of the margin are set to auto and the width is a fixed value, the content area is horizontally centered in the layout context.
There is also a special rule on the left and right sides of the negative margin. If the left and right margins are negative and all elements exceed the browser, the rule will not form a scroll bar under the browser. If the margin on the right is a negative number and the element moves outward beyond the browser, it will not disappear because a scroll bar is formed under the browser. In addition, Chinese characters are automatically wrapped when the height of the parent element is allowed. If the height of the parent element is insufficient to accommodate all Chinese characters, and the over-flow attribute is not set for the parent element, the content of the Chinese character exceeds the parent element. In addition to the height of the parent element, you must set the word-wrap and word-break attributes.

In the vertical direction, the vertical direction is more complex than the horizontal direction, because the margin can be merged in the vertical direction but not in the horizontal direction. The height attribute in the vertical direction will not be extended as much as possible by default as width, but will be as small as possible for the content height. In this way, when the height is auto and the parent element has no adding and border space, the margin range of the highest block level child element and the lowest block level child element is not in the content area of the parent element, the two margin functions in the same scope as the margin of the parent element (both are the margin spaces outside the parent element) and have a merging effect. If the parent element has a border or padding, the space will block the range of the maximum and minimum block level sub-elements beyond its layout context, and increase the height value of the parent element. Note that if padding or margin is set to a percentage, the reference of this percentage is the width of the parent element regardless of the vertical or horizontal direction. In a layout context, the relative positions of each block-level sub-element are fixed. If the position of a sub-element changes, the sub-elements under it will change accordingly in order to maintain the same relative position as the original one. In this case, pay special attention to the negative margin. The negative margin is not very similar based on whether the height of the parent element is auto. This kind of difference is mainly manifested in the last block-level sub-element. As mentioned above, when the value of margin-top conflicts with the implementation of margin-bottom, the value of margin-top should be prioritized, because the position of the block-level child element can be freely adjusted according to the margin in the layout context, the first child element and the middle child element do not conflict with the margin-top and margin-bottom, the only possible conflict is the last block-level sub-element, because the margin-bottom of the last block-level sub-element acts on the bottom boundary of the parent element content area, if the bottom boundary is variable, there is no conflict. If the bottom boundary is immutable, there may be a conflict. The bottom boundary variable and immutable are determined by whether the height of the parent element is auto. When the height is auto, all negative margin values of the block-level sub-elements will produce the effect of shortening the parent element. If the height is a fixed value, then the margin-bottom of the last block-level sub-element does not have any effect.

2. In the rectangular area of the row:
The rectangular area (Box Model) in the row is simpler. First, the width and height settings of the rectangular area in the row are invalid. It only automatically adjusts its size according to the content size. In terms of margin, the vertical setting of margin does not have any effect, because after all, margin cannot change the row spacing in the row box. The horizontal margin can have a corresponding effect. Similarly, the vertical settings of the padding and border do not change the line spacing, so they do not see the effect, unless there is a background or color, it will have some effect, for example, the content of the adjacent upper and lower rows is overwritten, but the row spacing remains unchanged. The horizontal setting has the same effect.