Css1 requires 2 (draft1)

Css1 requires 2

Iii. Box Model
Edge (margin), border (Border), padding (padding), content (content), box size is the width of the element + padding (padding) + edge (margin)
1. Block elements:
The display attribute indicates that block or list-item elements are block-level elements, and floating elements (float is not 'None') are also block-level elements.
The padding and edge attributes cannot be inherited.
The left outer edge is added to the whitelist, and the border and edge are included. The left inner edge is only included in the content.
Top is the top of an element that includes padding, border, and edge.
Top and left outer edge are defined for inline and floating elements. They are not defined for non-floating block-level elements.
The width of an element refers to the width of its content, that is, from the left inner boundary to the right inner boundary. The same height is only the height of the content from the inner top to the inner bottom;

1.1 vertical formatting
The width of the edge of a non-floating block-level element refers to the minimum value of the boundary of the surrounding box.
Two or more peripheral edges take the largest edge value.
For a negative edge, the maximum value of the absolute value of the adjacent negative edge minus the largest positive adjacent edge is used as the box edge. If there is no positive edge, the maximum value of the absolute value of the adjacent negative edge is obtained.

1.2 horizontal formatting
The horizontal position and size of non-floating block-level elements are determined by seven attributes: margin-left, border-left, padding-left, width, padding-right, border-right, and margin-right.
The sum of the seven attribute values equals the width (width) of the parent element)

The default value of width is 'auto'. If an element is not a replaced element, the width is calculated by calculating the sum of the preceding seven attributes (equal to the width of the parent element ). if an element is a replace element, the auto value of the width is automatically replaced by the actual width of the element.

Margin-left, width, and margin-right can be set to auto. for the replaced element, the width auto is replaced by the actual width, so only the margin-left and margin-right can be set to auto.

The minimum value of the width defined by UA is non-negative (each element may be different ). if the width is smaller than this limit (or explicitly specified, or auto and the calculated width is smaller than this minimum value), the minimum value is used as the width.

If margin-left or margin-right is explicitly specified as 'auto', UA sets an appropriate value to make the sum of the seven attributes equal to the width of the parent element.

If no property is set to 'auto', the value of margin-right is set to 'auto '.

If one of the three attributes is set to 'auto' and width is one of them, other attributes (such as margin-left and margin-Right) are set to 0, the width is set to a proper value so that the sum of the seven attributes equals the width of the parent element.

Otherwise, if both margin-left and margin-right are set to 'auto', they are set to equal values, which positions the element in the center of the parent element.

If one of the seven attributes of an inline or floating element is set to 'auto', it is treated as 0.

Unlike vertical margin, horizontal margin does not overlap.

1.3list-item Element
When the element display is set to 'LIST-item', It is formatted as a block-level element. the list-item mark (Marker) is determined based on the list-style attribute. for right-to-left text, the mark is located on the right side of the box.

1.4floating Element
Elements with the float attribute can be located outside the normal flow element and formatted as a block-level element. for example, set the float attribute of an image to 'left'. Move the image to the left until the edge of another block-level element is added to the border or whitelist. different flows will be moved back to the right. the edge, border, and padding of the element will be retained, and the edge will never overlap with the adjacent element.
The positioning of floating elements follows the following restrictions:
1. The left outer boundary of the left-floating element is not equal to the left inner boundary of the parent element.
2. the left outer boundary of the left floating element must be on the right side of the right outer boundary of the left floating element that appears earlier (in HTML Script. the top of the element that appears earlier must be lower than the bottom of the element that appears later. similar to the right floating element.
3. The right outer boundary of the left floating element cannot reach the right of the left outer boundary of any right floating element on the Right of UA.
4. The top of the floating element cannot be higher than the top of the parent element;
5. The top of a floating element cannot be higher than the top of a floating or block-level element that occurs earlier;
6. The top of the floating element cannot be higher than the top of the inline-box that appears first on the webpage;
7. Floating elements must be placed on top as much as possible;
8. The left floating element must be positioned as far as possible to the left layout; the right floating element must be positioned as far as possible to the right layout. It is best to first layout the element on the left or right.

Inline Elements