1. Document flow layout

Block-level elements (width and height, single row, large box)

Inline elements (content determines height and width, not wrapping)

The display conversion

Display :block Conversion block (display) Diaplay :inline conversion block display:inline-block conversion block display:none HiddenCopy the code

2, (position) Position layout

Position :relative Position (reserved position) Position: Absolute Position (not reserved position) Position: Fixed Fixed position (sticky position Sticky positioning (which allows the positioned element to behave as relative positioning until it scrolls to a threshold point (for example, 10 pixels from the top of the viewport), after which it becomes fixed) uses orientation to determine positionCopy the code

The son rejects the father, or the son rejects the father

Z-index (overlap order)

Z-index :1 Z-index :2 Z-index :3 A larger number leads to the front. Z-index: Auto The stack level is the same as the parent level. Z-index :integer The stack level is 0Copy the code

3. (float) Positioning

Float :left float:right float: None Default float:inheritCopy the code

Clear Attribute Clearing

Clear :left clear:right clear:both clearCopy the code

4,## (Flex) Elastic layout added

##orde

Orde :1 The smaller the number, the higher the orderCopy the code

Align-self (The align-self attribute overrides the behavior of align-items.)

button:first-child {
  align-self: flex-end;
}

Copy the code

Box, Font, background, pseudo class, border