Some time ago, I took a moment to read the basic knowledge about box model of CSS document. While reading and recording some of the main points, here to do some sorting, to share with you, if there is an understanding of the wrong place, please feel free.
1. Overview
Each element in the document is depicted as a rectangular box. The purpose of the rendering engine is to determine the size, attributes-such as its color, background, border-and the location of the boxes.
In CSS, these rectangular boxes are described using a standard box model. This model describes the space occupied by an element. Each box has four boundaries: Margin edgemargins, border border border edge, margin border padding edge and contentedge.
The following picture is from the MDN, which is very simple and easy to understand:
Vertical folding of 2.margin
When there are 2 or more vertical margin values around a non-floating-box element and no border, padding, or other content exists between them, the longitudinal distance between them takes the maximum value in margin.
Horizontal margin does not produce folding.
3.auto attribute value vs. ua
- When the value of margin, padding, border, and content is auto, it means that their actual value is assigned by the UA (user agent).
- On the landscape, for example: Margin-left width margin-right has a value of Auto,ua that ensures that 3 is added equal to the parent element's width and that the property of the auto value is reassigned to the specified value. If none of the 3 is auto, then UA forces the value of Margin-right to auto.
- Similar in portrait.
- When more than one value is auto in margin-left width margin-right, if width is one of them, then UA sets the value of Margin-left, margin-right to 0, and gives a suitable value for width. If the value of Margin-left, Margin-right is Auto,ua, the element is centered.
- If the value of any of the above properties of a floating element or block-level element is auto, then UA treats it as ' 0 '.
4.line-height
In principle, the Line-height value gives the total height of the text in the element. The margin and padding equivalents of any element in the line cannot change the line-height of the element. That is, if the padding value of an element is too small, it may overlap with other lines of text.
5.normal-flow, floats and absolute position
(1) Normal-flow including block (block level), inline (in line), relative position (relative positioning) 3 kinds of box model;
- In block-level scenarios, the containing blocks are placed in turn. The default is top-down vertically, with only the left edge of the parent element, and the distance between the block-level elements and their margin values.
- In inline mode, the default elements are arranged horizontally, from left to right and from top to bottom. The horizontal distance rules are similar to block-level elements, which are influenced vertically by vertical-align, line-height and other attributes. There are no attributes such as margin between the lines of a paragraph (line-box).
- In relative positioning mode, the elements can also be displaced based on relative positioning after they have been laid out in the normal-flow manner. This displacement has no effect on other elements.
(2) Float-flow (floating mode)
- Float refers to floating an element to the left or right of a row.
- For example, an element that floats to the left is moved to the left edge of the parent element or to the right edge of the previous left floating element.
(3) Absolute-flow (absolute positioning mode)
- Absolute positioning is an exact position relative to its containing block (the first element in the parent element that position is relative).
- An absolutely positioned element is completely removed from the Normal-flow.
- Absolute positioning elements are based on: top, bottom, left, and right property values to locate.
- The margin value of an absolutely positioned element is not collapsed.
6. Float and clear
- Clear:left requires that the top border edge of the box be lower than the bottom outer edge of any left-hand floating box created by earlier elements in the source document.
- Clear:right requires that the top border edge of the box be lower than the bottom outer edge of any right-hand floating box generated by earlier elements in the source document.
- Clear:both requires that the top border edge of the box be lower than any left-hand floating box that was produced by earlier elements in the source document and the bottom outer edge of the floating box on the right.
Clear method of calculation:
- Clear a value other than "none" may introduce gaps and prevent edge folding, which exists as an interval above the top of the element's edge. It is used to push elements in the vertical direction over the position of the floating element. Calculates the gap of the element on which the purge is set by first determining the assumed position of the top edge of the element. If the ' clear ' attribute of the element is ' none ', this position is actually the edge of the boundary. If this imaginary position of the top edge of the element does not exceed the associated float, the gap is introduced, and the edge is collapsed according to the rule.
CSS Document Box Model reading notes
