CSS	address
CSS Basic Notes (1)	CSS notes--super detailed--zero foundation--simple and easy to understand (1)_ddddddyu's blog-CSDN blog
CSS Basic Notes (2)	CSS notes--super detailed--zero foundation--simple and easy to understand (2)_ddddddyu's blog-CSDN blog
CSS Basic Notes (3)	CSS notes--super detailed--zero foundation--succinct and easy to understand (3)_ddddddyu's blog-CSDN blog
CSS3 Advanced Notes	CSS3 Advanced Notes - Super Detailed - Concise and Easy to Understand_ddddddyu's Blog-CSDN Blog

1 Add a selector

attribute selector
Struct pseudo-class selector
Pseudo-element selector

attribute selector

Select by element attribute, not by class or id

Struct pseudo-class selector

Elements are selected mainly based on the document structure ,

ul li:first-child {
  background-color: lightseagreen;
}

ul li:last-child {
  background-color: lightcoral;
}

ul li:nth-child(3) {
  background-color: aqua;
}

Detailed explanation of nth-child(n) parameter n

n can be numbers, keywords and formulas
If n is a number, it is to select the nth child element, and the number inside starts from 1
n can be a keyword: even even, odd odd
n can be a formula: the common formula is as follows (if n is a formula, it will be calculated from 0, but the 0th element or the number of elements beyond it will be ignored)

official	value
2n	even number (equivalent to even)
2n+1	odd number (equivalent to odd)
5n	5 10 15 ... (multiples of 5)
n+5	From the 5th (including the fifth) to the end
-n+5	The first 5 (including the 5th)

nth-child与nth-of-type区别

nth-child Select the number of child elements in the parent element, regardless of the type
nth-of-type Select elements of a specified type

  div :nth-child(1) {
    background-color: lightblue;
  }

  div :nth-child(2) {
    background-color: lightpink;
  }

  div span:nth-of-type(2) {
    background-color: lightseagreen;
  }

  div span:nth-of-type(3) {
    background-color: #fff;
  }

Pseudo-element selector

Precautions:

before and after must have content attributes
before before the content, after after the content
before and after creates an element, but is an inline element
The created elements Dom cannot be found in , so they are called pseudo-elements
Pseudo-elements have the same weight as label selectors, with a weight of 1

    div::after,
    div::before {
      width: 20px;
      height: 50px;
      text-align: center;
      display: inline-block;
    }
    div::after {
      content: '德';
      background-color: lightskyblue;
    }

    div::before {
      content: '道';
      background-color: mediumaquamarine;
    }

2 Added 2D transformation

2D transformation is to change the position and shape of the label on the two-dimensional plane
Move: translate
Rotation: rotate
Zoom: scale

2D conversion of translate

  transform: translate(x, y)
  transform: translateX(n)
  transfrom: translateY(n)

important point:

2D movement mainly refers to movement in the horizontal and vertical directions
The biggest advantage of translate is that it does not affect the position of other elements
The 100% unit in translate is calculated relative to its own width and height
Inline tags have no effect

Center the box horizontally and vertically

div {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: pink;
    /* 1. 我们tranlate里面的参数是可以用 % */
    /* 2. 如果里面的参数是 % 移动的距离是 盒子自身的宽度或者高度来对比的 */
    /* 这里的 50% 就是 50px 因为盒子的宽度是 100px */
    /* transform: translateX(50%); */
}
        
p {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background-color: purple;
    /1.* margin-top: -100px;
    margin-left: -100px; */
  
    /2.* translate(-50%, -50%)  
      盒子往上走自己高度的一半   */
    transform: translate(-50%, -50%);
}
        
span {
    /* translate 对于行内元素是无效的 */
    transform: translate(300px, 300px);
}

2D conversion of rotate

2D rotation refers to rotating an element clockwise or counterclockwise in a two-dimensional plane

/* 单位是：deg */
img:hover {
  transform: rotate(360deg)
}

rotate syntax:

rotate inside and degrees, the unit is deg
Clockwise when the angle is positive, counterclockwise when the angle is negative
The default rotation center point is the center point of the element

set rotation center

/* xy可以是百分数，像素，方位词 */
transform-origin: x y;

2D conversion scale

Used to control the zoom in and zoom out of elements

transform: scale(x,y);

Knowledge points:

Note that x and y are separated by commas
transform: scale(1, 1): The width and height are doubled, which is equivalent to no enlargement
transform: scale(2, 2): double the width and height
transform: scale(2): If only one parameter is written, the second parameter is the same as the first parameter
transform:scale(0.5, 0.5): zoom out
scale The biggest advantage: you can set the conversion center point to scale, the default is to scale by the center point, and it does not affect other boxes

2D transformation comprehensive writing method and order problem

Using multiple transformations at the same time, the format is transform: translate() rotate() scale()
The order will affect the effect of the transformation (rotating first will change the direction of the coordinate axis)
When we have position or other attributes at the same time, we need to put the displacement at the front

3 Add animation (animation)

animation use

Define the animation first
Then call the defined animation

/*1. 定义动画*/
@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
}

/*2. 使用动画*/
div {
 /* 调用动画 */
  animation-name: 动画名称;
  /* 持续时间 */
  animation-duration: 持续时间；
}

animation sequence

0% is the start of the animation, 100% is the completion of the animation, such a rule is the animation sequence
If a certain CSS style is specified in @keyframs, the animation effect will gradually change from the current style to the new style
Animation is the effect of gradually changing an element from one style to another, and any number of styles can be changed any number of times
Use a percentage to specify when the change occurs, or use from a sum to, which is equivalent to 0% and 100%

Common Animation Properties

Animation property shorthand

/* animation：动画名称 持续时间 运动曲线  何时开始  播放次数  是否反方向  动画起始或者结束的状态 */

animation: myfirst 5s linear 2s infinite alternate;

The shorthand attribute does not contain animation-play-state
Pause animation: animation-play-state: puased; often used in conjunction with mouse passing and other
Want the animation to walk back instead of jumping back: animation-direction: alternate
After the box animation ends, stop at the end position: animation-fill-mode : forwards

speed curveanimation-timing-function

Specifies the speed curve of the animation, the default is ease

4 Added 3D conversion

3D features: near big and far small, invisible objects and surface occlusion

3D knowledge points, compared with 2D, there are more z-axis directions

3D Displacement:translate3d(x, y, z)
3D Rotation:rotate3d(x, y, z)
透视 ：perspctive
3Dpresent transfrom-style

3D mobile translate3d

transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
注意：x, y, z 对应的值不能省略，不需要填写用 0 进行填充

perspective perspective

Perspective is also called the viewing distance, the so-called viewing distance is the distance from the human eye to the screen

Knowledge points:

Perspective needs to be written on the parent box of the inspected element
d: It is the viewing distance, which refers to the distance from the human eye to the screen
z: It is the z axis, the larger the z axis (positive value), the bigger the object we see

body {
  /*透视需要写在被视察元素的父盒子上面 */
  perspective: 1000px;
}

translateZ与perspective的区别

perspecitve Set the viewing distance for the parent, and translateZ set different sizes for the child elements
With perspective, you can see the changes caused by translateZ

3D rotation rotateX

语法
transform: rotateX(45deg)  -- 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) -- 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) -- 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg)  -- 沿着自定义轴旋转 45 deg 为角度

transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度
x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标旋转的角度
transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg

Rotation direction is left hand rule

3D rendering transform-style

Control whether the sub-element opens the 3D environment
transform-style: flat Represents that the child element does not open 3D the three-dimensional space, the default
transform-style: preserve-3d The sub-element opens the three-dimensional space
Code is written to the parent, but affects child boxes

5 Add transition transition

Transition transition is a composite property that contains four:

transition-property: transition property (default value is all)
transition-duration: transition duration (default value is 0s)
transition-timing-function: transition function (default is ease function)
transition-delay: transition delay time (default value is 0s)

.test{
    height: 100px;
    width: 100px;
    background-color: pink;
    transition-duration: 3s;
/*     以下三值为默认值，稍后会详细介绍 */
    transition-property: all;
    transition-timing-function: ease;
    transition-delay: 0s;
}    
.test:hover{
    width: 500px;
}
~~~html
<div class="test"></div>

Can be abbreviated, separated by spaces, the duration attribute is required and not 0, others are optional

Delay defaults to 0, property defaults to all, function defaults to ease

ease: 开始和结束慢，中间快。
linear: 匀速。
ease-in: 开始慢。
ease-out: 结束慢。
ease-in-out: 和ease类似，但比ease幅度大。

6 CSS3 new box model

Specify the box model by box-sizing , there are two values: content-box , border-box

It is mainly to change the size of the calculation box, which can be divided into two cases:

box-sizing: content-box box size is width + padding + border (previously default)
box-sizing: border-box box size is width

If we change the box model to box-sizing: border-box , then the padding and border will not support the big box (provided that the padding and border will not exceed the width width)

CSS3 advanced notes--super detailed--simple and easy to understand