1. Universal selector *

2. Element selector h2

3. Class selector .class

4.id selector #id

1.Intersection selector e#id || e.class

2. Union selectors e1,e2,e3

3. Descendant selector e1 e2 e3

4. Descendant selector e1>e2>e3

5. Adjacent sibling selector e1 e2

6. Universal sibling selector e1~e2

Pseudo element selector

Pseudo class selector

1 [attr]

2 [attr="val"]

3 [attr^="val"]

4 [attr$="val"]

5 [attr*="val"]

6 [attr~="val"]

7 [attr|="val"]

no-repeat

repeat-x

repeat-y

space (adjust image spacing)

round (resize image)

(top, left, right, bottom, center) pairwise combination

(x% y%)

(x y)

padding-box

border-box

content-box

padding-box

border-box

content-box

auto (original size)

x,y (width, height)

x%,y% (percentage of parent element)

cover (adjusted to cover the entire container)

contain (adjusted to be fully displayed)

local (scrolls with content)

scroll (does not scroll with the content, but scrolls with the page)

fixed (fixed, uncontrolled size)

border-width

border-color

border-style

border-raius

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

outline-color,style,width

outline-offset (the outer offset of the outline from the border)

auto

hidden

scroll

visible (default)

inherit

1. After the element is floated, it will break away from the document flow and increase the level.

2. The position of the element after it floats is affected by the previous floated element. If the previous element is floated and the position behind it is sufficient, it will be displayed on the same line; if the position behind it is insufficient, the element will be squeezed to the next line for display.

3. After the element is floated, if the previous element is not floated, the current element will be floated in its own row.

4. If an element is pushed to the next row after being floated, the position of the current element is affected by the previous element with the same floating direction.

1. Floating will cause the height of the parent element to collapse

2. Elements have "wrapping properties" after being floated (similar to inline blocks.)

static (default, normal layout)

relative (relative positioning)

absolute (absolute positioning)

fixed (fixed positioning)

sticky (sticky positioning)

1. The later the element is positioned, the higher the level (z-index)

2. After the element is positioned, it has "wrapping properties" (similar to inline blocks.)

Horizontal centering: parent element text-align: center;

Vertically centered: line-height: (height);

Center horizontally: margin: 0 auto;

Center vertically:

Use float implementation

Use positioning to achieve

Double flying wing layout

holy grail layout

Main axis: specifies the order in which elastic elements are arranged.

Vertical axis: determines the direction in which elements in the second row are added after a line break occurs.

justify-content (alignment on main axis)

Alignment on vertical axis

flex-basis sets the initial size (not width) occupied by the flexible element on the main axis.

If flex-basis and width and height are set at the same time, the latter will be automatically overwritten.

fr (eg: 1fr 1fr 1fr; 100px 50% 1fr)

fr: The fr here is proportional to the height of the grid container. (If there is no height, it will be calculated according to the height of the content.)

Notice

Skill