CSS deep understanding of learning notes-margin and css learning notes-margin

CSS deep understanding of learning notes-margin and css learning notes-margin

1. margin and container size

Element size: ① visible size clientWidth (standard); ② occupying size

　　

Margin and visual size: ① applicable to normal block elements without width/height; ② applicable only to horizontal dimension

Margin and occupy size: ① block/inline-block horizontal elements are applicable; ② it is irrelevant to whether width/height is set; ③ it is applicable to horizontal and vertical directions.It can be used for page up/down white (poor padding compatibility ).

2. margin and percentage Unit

Percentage of common elements: calculated relative to the container width.

Percentage of absolute positioning elements: the width of the container relative to the first located ancestor is calculated.

3. Overlapping margin

Margin overlapping features: ① only occurs on the horizontal element of the block (excluding the float and absolute elements); ② only occurs in the vertical direction without considering the writing-mode.

Margin overlapping situations: ① adjacent sibling elements; ② first/last child element of the parent level; ③ empty block elements

　　

　　

4. calculation rules of overlapping margin

Positive is given as 'distinct'; Positive and Negative values are added; negative is negative.

　　Use Cases of margin:

　　

 

5. Understand margin: auto

Rule: if one side is a fixed value and one side is auto, auto is the size of the remaining space. If both sides are auto, the remaining space is evenly divided.

Writing-mode and vertical center (the modified width of margin: auto center will expire ):

　　

The margin of the absolute positioning element is centered:

　　

6. Locate the negative value of margin

The two ends of the negative value of margin are aligned:

　　

High-level layout under negative margin values:

　　

Adaptive Layout of two columns under negative margin values:

　　

7. Analysis of margin failure

(1) the vertical margin of the inline horizontal element is invalid. premise: ① the element is not replaced, for example, the element is not ; ② the normal writing mode.

(2) margin overlaps

(3) The declared margin such as display: table-cell and margin: display: table-cell/display: table-row is invalid.

(4) position: absolute and margin: the absolute position element does not set the positioning direction of the margin value "invalid". For example, none of the valid margin-top values of img {top: 10%} are valid.

The margin is invalid.

The margin is invalid due to the inline feature of the delimiter:

　　　　

8. Learn more about attributes such as margin-start and margin-end.

Margin-start: ① normal flow direction. margin-start is equivalent to margin-left, and the two do not overlap. ② If the horizontal flow is from right to left, margin-start is equivalent to margin-right; ③ in vertical streaming (writing-mode: vertical-*;), margin-start is equivalent to margin-top.

Margin-end: ① normal flow direction. margin-end is equivalent to margin-right. The two do not overlap. ② If the horizontal flow is from right to left, margin-end is equivalent to margin-left; ③ in vertical streaming (writing-mode: vertical-*;), margin-end is equivalent to margin-bottom.

Margin-collapse: controls the overlap of margin. Collapse (default-overlapping), discard (cancel, make margin invalid), and separate (separate, no margin overlap ).