CSS	adresse
Notes de base CSS (1)	Notes CSS--super détaillées--zéro fondement--simples et faciles à comprendre (1)_ddddddyu's blog-CSDN blog
Notes de base CSS (2)	Notes CSS--super détaillées--zéro fondement--simples et faciles à comprendre (2)_ddddddyu's blog-CSDN blog
Notes de base CSS (3)	Notes CSS--super détaillées--zéro fondation--succinctes et faciles à comprendre (3)_ddddddyu's blog-CSDN blog
Notes avancées CSS3	Notes avancées CSS3 - Super détaillées - Concises et faciles à comprendre_ddddddyu's Blog-CSDN Blog

1 Ajouter un sélecteur

sélecteur d'attribut
Sélecteur de pseudo-classe de structure
Sélecteur de pseudo-élément

sélecteur d'attribut

Sélectionnez par attribut d'élément, pas par classe ou identifiant

Sélecteur de pseudo-classe de structure

Les éléments sont sélectionnés principalement en fonction de la structure du document ,

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

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

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

Explication détaillée du paramètre nth-child(n) n

n peut être des nombres, des mots-clés et des formules
Si n est un nombre, c'est pour sélectionner le nième élément enfant, et le nombre à l'intérieur commence à partir de 1
n peut être un mot-clé : pair pair, impair impair
n peut être une formule : la formule courante est la suivante (si n est une formule, il sera calculé à partir de 0, mais le 0ème élément ou le nombre d'éléments au-delà sera ignoré)

officiel	valeur
2n	nombre pair (équivalent à pair)
2n+1	nombre impair (équivalent à impair)
5n	5 10 15 ... (multiples de 5)
n+5	Du 5ème (y compris le cinquième) à la fin
-n+5	Les 5 premiers (dont le 5ème)

nth-child与nth-of-type区别

nth-child Sélectionnez le nombre d'éléments enfants dans l'élément parent, quel que soit le type
nth-of-type Sélectionner des éléments d'un type spécifié

  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;
  }

Sélecteur de pseudo-élément

Précautions:

before et after doit avoir content des attributs
before avant le contenu, après après le contenu
before et after crée un élément, mais est un élément en ligne
Les éléments créés Dom sont introuvables dans , ils sont donc appelés pseudo-éléments
Les pseudo-éléments ont le même poids que les sélecteurs d'étiquettes, avec un poids de 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 Transformation 2D ajoutée

La transformation 2D consiste à modifier la position et la forme de l'étiquette sur le plan bidimensionnel
Déplacer : traduire
Rotation : faire pivoter
Zoom : échelle

Conversion 2D de translation

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

point important:

Le mouvement 2D fait principalement référence au mouvement dans les directions horizontale et verticale
Le plus grand avantage de translate est qu'il n'affecte pas la position des autres éléments
L'unité 100 % en translation est calculée par rapport à sa propre largeur et hauteur
Les balises en ligne n'ont aucun effet

Centrer la boîte horizontalement et verticalement

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);
}

Conversion 2D de rotation

La rotation 2D fait référence à la rotation d'un élément dans le sens des aiguilles d'une montre ou dans le sens inverse des aiguilles d'une montre dans un plan bidimensionnel

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

tourner la syntaxe :

rotate intérieur et degrés, l'unité est deg
Dans le sens des aiguilles d'une montre lorsque l'angle est positif, dans le sens inverse des aiguilles d'une montre lorsque l'angle est négatif
Le centre de rotation par défaut est le centre de l'élément

définir le centre de rotation

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

Échelle de conversion 2D

Utilisé pour contrôler le zoom avant et le zoom arrière des éléments

transform: scale(x,y);

Points de connaissance :

Notez que x et y sont séparés par des virgules
transform: scale(1, 1): La largeur et la hauteur sont doublées, ce qui équivaut à aucun agrandissement
transform: scale(2, 2): doubler la largeur et la hauteur
transform: scale(2): Si un seul paramètre est écrit, le deuxième paramètre est le même que le premier paramètre
transform:scale(0.5, 0.5): Dézoomer
scale Le plus grand avantage : vous pouvez définir le point central de conversion à l'échelle, la valeur par défaut est de mettre à l'échelle par le point central, et cela n'affecte pas les autres cases

Méthode d'écriture complète de transformation 2D et problème d'ordre

En utilisant plusieurs transformations en même temps, le format est transform: translate() rotate() scale()
L'ordre affectera l'effet de la transformation (la rotation en premier changera la direction de l'axe des coordonnées)
Lorsque nous avons la position ou d'autres attributs en même temps, nous devons mettre le déplacement à l'avant

3 Ajouter une animation (animation)

utilisation d'animations

Définissez d'abord l'animation
Appelez ensuite l'animation définie

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

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

séquence d'animations

0% est le début de l'animation, 100% est l'achèvement de l'animation, une telle règle est la séquence d'animation
Si un certain style CSS est spécifié dans @keyframs, l'effet d'animation passera progressivement du style actuel au nouveau style
L'animation est l'effet de changer progressivement un élément d'un style à un autre, et n'importe quel nombre de styles peut être changé n'importe quel nombre de fois
Utilisez un pourcentage pour spécifier quand le changement se produit, ou utilisez from une somme toqui équivaut à 0 % et 100 %

Propriétés d'animation communes

Raccourci de propriété d'animation

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

animation: myfirst 5s linear 2s infinite alternate;

L'attribut raccourci ne contient pas animation-play-state
Pause animation : animation-play-state : en pause ; souvent utilisé en conjonction avec le passage de la souris et d'autres
Voulez-vous que l'animation recule au lieu de revenir en arrière : animation-direction: alternate
Une fois l'animation de la boîte terminée, arrêtez-vous à la position finale : animation-fill-mode : vers l'avant

courbe de vitesseanimation-timing-function

Spécifie la courbe de vitesse de l'animation, la valeur par défaut est la facilité

4 Conversion 3D ajoutée

Caractéristiques 3D : objets invisibles de près et de loin petits et occlusion de surface

Points de connaissance 3D, par rapport à 2D, il y a plus de directions d'axe z

3D Déplacement:translate3d(x, y, z)
3D Rotation:rotate3d(x, y, z)
透视 ：perspctive
3Dcadeau 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 进行填充

point de vue

La perspective est également appelée la distance de visualisation, la distance dite de visualisation est la distance entre l'œil humain et l'écran

Points de connaissance :

La perspective doit être écrite sur la boîte parent de l'élément inspecté
d : C'est la distance de visualisation, qui fait référence à la distance entre l'œil humain et l'écran
z : C'est l'axe z, plus l'axe z est grand (valeur positive), plus l'objet que nous voyons est grand

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

translateZ与perspective的区别

perspecitve Définissez la distance de visualisation pour le parent et translateZ définissez différentes tailles pour les éléments enfants
Avec la perspective, vous pouvez voir les changements causés par translateZ

rotation 3D rotationX

语法
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

Le sens de rotation est la règle de la main gauche

Style de transformation de rendu 3D

Contrôle si le sous-élément ouvre l'environnement 3D
transform-style: flat Représente que l'élément enfant n'ouvre pas 3D l'espace tridimensionnel, la valeur par défaut
transform-style: preserve-3d Le sous-élément ouvre l'espace tridimensionnel
Le code est écrit dans le parent, mais affecte les boîtes enfants

5 Ajouter une transition de transition

La transition transition est une propriété composite qui contient quatre :

transition-property : propriété de transition (la valeur par défaut est tout)
transition-duration : durée de la transition (la valeur par défaut est 0 s)
transition-timing-function : fonction de transition (la fonction par défaut est la fonction de facilité)
transition-delay : délai de transition (la valeur par défaut est 0 s)

.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>

Peut être abrégé, séparé par des espaces, l'attribut durée est obligatoire et non 0, les autres sont facultatifs

Le délai par défaut est 0, la propriété est définie par défaut sur tous, la fonction est définie par défaut sur facilité

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

6 CSS3 nouveau modèle de boîte

Spécifiez le modèle de boîte par box-sizing , il y a deux valeurs : content-box , border-box

Il s'agit principalement de modifier la taille de la case de calcul, qui peut être divisée en deux cas :

box-sizing : la taille de la boîte de contenu est la largeur + le rembourrage + la bordure (précédemment par défaut)
box-sizing : la taille de la boîte border-box est la largeur

Si nous changeons le modèle de boîte en box-sizing: border-box , alors le rembourrage et la bordure ne prendront pas en charge la grande boîte (à condition que le rembourrage et la bordure ne dépassent pas la largeur largeur)

Notes avancées CSS3 - super détaillées - simples et faciles à comprendre