CSS first experience and element box

Element type and arrangement

Detailed explanation of css element display attribute

Four ways to apply css to elements

Other content in the css document

Principles and implementation of media queries

First experience of the role of css selector

Types and application scenarios of css simple selectors

Types and application scenarios of css context selectors

Types and application scenarios of non-group matching of css pseudo-class selectors (1)

CSS pseudo-class selector non-group matching application scenario (2)

Application scenarios of group matching of css pseudo-class selectors

css precise control of page text

How to correctly introduce Ali font icons into the project (1)

How to correctly introduce Ali font icons into the project (2)

CSS precise control of font size and style (1)

CSS precise control of font size and style (2)

CSS precise control of font size and style (3)

Text line height and alignment

The composition and common properties of the box model

Box model layout and containing blocks

Box model formatted horizontally

Box model margin vertical height collapse problem

Element background control in box model

The effect of element floating and clearing floating

Element positioning methods and application scenarios in the box model

The principle and implementation of flex layout

Flex container settings and features

The main axis direction of the flex container

How flex items wrap on the main axis of the container

flex items are sorted on the main axis of the container

The alignment of flex items on the cross axis

The magnification factor of the flex item on the main axis of the container

Arrangement and alignment of flex items on the main axis of the container

The shrinkage factor of the flex item on the main axis

flex item calculation width and item abbreviation property flex

Flex layout example-irregular rectangular layout

Application scenarios of flex instance-order attribute

Flex layout example/PC-side universal layout solution (1)

Flex layout example/PC-side universal layout solution (2)

Flex layout example/mobile terminal (mall) layout plan (1)

Flex layout example/mobile terminal (mall) layout plan (2)

Flex layout example/mobile terminal (mall) layout plan (3)

Flex layout example/mobile terminal (mall) layout plan (4)

Grid layout ideas and basic terms

Creation of grid container and generation of grid project

Set the number and size of grid items

Grid cell division and item placement

grid named grid lines and named areas

Grid named grid area practical three-column quick layout

Set the alignment of cells in the Grid container

Set the alignment of an item in a cell

Grid practice-quickly implement 12-column grid layout component (1)

Grid practice/-quickly implement 12-column grid layout component (2)

Grid practice/quickly implement three-column layout on PC

Grid practice/responsive online photo album