I reviewed it again from html. Today I will mainly review css3, sort out some common knowledge points, and update js, jq, vue, react, etc

CSS3 is the latest CSS standard.

CSS3 border

Border radius: used to create fillets

Box shadow: used to add shadows

Border image: creates a border using a picture

CSS3 background

Background image: add background image

Background size: Specifies the size of the background image

Background origin: Specifies the location area of the background image

Background clip: the background clipping attribute is drawn from the specified position

CSS3 Gradients

CSS3 defines two types of gradients:

• Linear Gradients - down / up / left / right / diagonal
• Radial Gradients - defined by their centers

#grad {
    background-image: linear-gradient(#e66465, #9198e5);
}

#grad {
  height: 200px;
  background-image: linear-gradient(to right, red , yellow);
}

#grad {
  height: 200px;
  background-image: linear-gradient(to bottom right, red, yellow);
}
Upper left corner to lower right corner

Angles can also be defined

background-image: linear-gradient(angle, color-stop1, color-stop2);

Radial gradient:

#grad {
  background-image: radial-gradient(red, yellow, green);
}

You can also set shapes

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

CSS3 text effect

text-shadow

box-shadow

text-overflow

word-wrap

word-break

CSS3 # 2D conversion

translate(): moves from the current element position according to the parameters given by the X-axis and Y-axis positions

rotate(): rotate clockwise for a given number of degrees. Negative values are counterclockwise rotation.

scale(): the size of an element that increases or decreases

skew(): the angle at which the X and Y axes are tilted

matrix(): six parameters, rotation, scaling, moving and tilting

CSS3 3D conversion

rotateX()

rotateY()

CSS3 animation

@The keyframes rule is to create animation

@keyframes myblog
{
    from {background: red;}
    to {background: yellow;}
}
from to You can replace it with a percentage

div
{
    animation: myblog 5s;
   
}

CSS3 multi column properties

Column count: the number of columns to be split.

Column gap: gap between columns

Column Rule Style: border style between columns

Column rule width: column and column width

Column rule color: the border color of columns and columns

Column rule: shorthand for all attributes

Column span: how many columns are spanned

Column width: Specifies the width of the column

CSS3 flex box

Elastic containers are defined as elastic containers by setting the value of the display property to flex or inline flex.

Six properties are set on the container

• flex-direction
• flex-wrap
• Flex flow: short form of flex direction attribute and flex wrap attribute
• justify-content
• align-items
• align-content

The elastic container contains one or more elastic child elements.

flex-direction

The flex direction attribute specifies the position of the elastic child element in the parent container.

flex-direction: row | row-reverse | column | column-reverse
row: Arrange horizontally from left to right (align left), the default arrangement.
row-reverse: Reverse the horizontal arrangement (right alignment, from the back to the front, with the last item at the front.
column: Vertical arrangement.
column-reverse: Reverse the vertical arrangement, from the back to the front, and the last item is at the top.

Justify content attribute

justify-content: flex-start | flex-end | center | space-between | space-around
flex-start: 
The elastic item is filled next to the beginning of the line.

flex-end: 
The elastic item is filled next to the end of the line.

center: 
The elastic item is centered next to the fill.

space-between: 
Elastic items are evenly distributed on this line.

space-around: 
Elastic items are evenly distributed on the line, leaving half the space on both sides.

flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;
nowrap(Default): no line breaks.
wrap: Wrap, first line above.
wrap-reverse: Wrap, first line below.

align-items

align-items: flex-start | flex-end | center | baseline | stretch;
flex-start: Start point alignment.
flex-end: End alignment.
center: Midpoint alignment.
baseline: Align the baseline of the first line of text of the item.
stretch(Default): if the project is not set to height or set to auto，Will occupy the height of the entire container.

Align content attribute

align-content: flex-start | flex-end | center | space-between | space-around | stretch

Flex growth attribute

The flex growth property defines the magnification of the item

Flex shrink attribute

The flex shrink attribute defines the reduction scale of the item

CSS grid layout

Define the rows and columns in the grid through the grid template columns and grid template rows attributes.

• grid-column-gap
• grid-row-gap
• grid-gap
• Adjust grid spacing
• The grid template columns property specifies the width of the column
• The grid template rows property sets the height of each row.
• The align content attribute is used to set the alignment of grid elements in the vertical direction in the container
• The grid column attribute defines the start and end positions of the grid element columns.
• Grid area attribute is the abbreviation of grid row start, grid column start, grid row end and grid column end attributes.