CSS Piecemeal advanced knowledge points

Display:inline-block: The line-level element can be set to a wide height, if the Inline-block element cannot be displayed completely then the whole line is wrapped instead of the word inside the line.

Position: Set reference, Top,left,right,bottom is relative to the reference offset

Poistion relative: Still in the document flow, TLRB is relative to its original position, often relative position as a reference for absolute positioning of child elements, and changing the level of the element Z axis (higher than the static (default) element Z axis)

Position absolute: Absolute positioning element content is content width, out of the document flow, Top/left/right/bottom is relative to the first parent anchor element (or root element)

Position fixed: Fix the content width of the positioning element, out of the document flow, positioning is relative to the window, even if the scroll is not changed

Z-index: Only valid for the positioned element (relative,absolte,fixed), and Z-index to 1 will run below the element in normal flow; Z-index also has a stack concept, That is, the z-index of the parent element (exactly the reference element) is relatively low, even if the z-index of the positioning sub-element is very high.

Text-align effect only when the content element is a row-level element

The default width of the float:float element is the content width, semi-detached document flow (out of the document flow for post-order elements, the element is not detached from the document stream for post-order content), and moves to the specified direction until it cannot be moved (to the parent element boundary). The post-post element will occupy the original position of the float element (normal document flow), and because the float element is similar to the positioning element, its z-index is relatively high, so it will mask the sequential elements (the content will not be overwritten).

The element of float no longer occupies a height, and the height of the parent element is determined by the non-float child element. If there is no non-float child element, the height of the parent element becomes 0

All the float elements themselves together in the same document flow. The height of the float element's parent element may become 0 (if there are no other non-float elements)

We can use the clear property to clear the effect of the float, when the Father element is open

Clear: A subsequent element applied to a floating element, applied to a block-level element. Can be added to spoof blank elements or Clearfix methods. The general method is to create a pesudo using Clearfix in the parent element of the float element element,clear:both

CSS Piecemeal advanced knowledge points