1. Sélecteur universel *

2. Sélecteur d'élément h2

3. Sélecteur de classe .class

4.id sélecteur #id

1.Sélecteur d'intersection e#id ||

2. Union des sélecteurs e1,e2,e3

3. Sélecteur descendant e1 e2 e3

4. Sélecteur descendant e1>e2>e3

5. Sélecteur de frères et sœurs adjacents e1 e2

6. Sélecteur universel de frères et sœurs e1 ~ e2

Sélecteur de pseudo-éléments

Sélecteur de pseudo-classe

1 [attr]

2 [attr="val"]

3 [attr^="val"]

4 [attr$="val"]

5 [attr*="val"]

6 [attr~="val"]

7 [attr|="val"]

pas de répétition

répéter-x

répéter

espace (ajuster l'espacement des images)

rond (redimensionner l'image)

(haut, gauche, droite, bas, centre) combinaison par paire

(x% y%)

(x et)

boîte de rembourrage

bordure-boîte

boîte de contenu

boîte de rembourrage

bordure-boîte

boîte de contenu

automatique (taille originale)

x,y (largeur, hauteur)

x%,y% (pourcentage de l'élément parent)

couvercle (ajusté pour couvrir tout le récipient)

contenir (ajusté pour être entièrement affiché)

local (parchemins avec contenu)

scroll (ne défile pas avec le contenu, mais défile avec la page)

fixe (taille fixe et incontrôlée)

largeur de la bordure

couleur de la bordure

style de bordure

frontière-raius

bordure-image-source

bordure-image-tranche

bordure-image-largeur

bordure-image-début

répétition de l'image de bordure

couleur du contour, style, largeur

outline-offset (le décalage extérieur du contour par rapport à la bordure)

auto

caché

faire défiler

visible (par défaut)

hériter

1. Une fois l'élément flottant, il se détachera du flux de documents et augmentera le niveau.

2. La position de l'élément après qu'il ait flotté est affectée par l'élément flottant précédent. Si l'élément précédent est flotté et que la position derrière lui est suffisante, il sera affiché sur la même ligne si la position derrière lui est insuffisante. L'élément sera compressé sur la ligne suivante pour être affiché.

3. Une fois l'élément flottant, si l'élément précédent n'est pas flottant, l'élément actuel flottera dans sa propre ligne.

4. Si un élément est poussé vers la ligne suivante après avoir été flottant, la position de l'élément actuel est affectée par l'élément précédent avec la même direction flottante.

1. Flotter entraînera l'effondrement de la hauteur de l'élément parent

2. Les éléments ont des "propriétés d'emballage" après avoir été flottants (similaires aux blocs en ligne.)

statique (par défaut, disposition normale)

relatif (positionnement relatif)

absolu (positionnement absolu)

fixe (positionnement fixe)

collant (positionnement collant)

1. Plus l'élément est positionné tard, plus le niveau (z-index) est élevé

2. Une fois l'élément positionné, il possède des "propriétés d'emballage" (similaires aux blocs en ligne.)

Centrage horizontal : élément parent text-align : center ;

Centré verticalement : hauteur de ligne : (hauteur) ;

Centrer horizontalement : marge : 0 auto ;

Centrer verticalement :

Utiliser l'implémentation float

Utiliser le positionnement pour atteindre

Disposition à double aile volante

mise en page du Saint Graal

Axe principal : précise l'ordre dans lequel les éléments élastiques sont disposés.

Axe vertical : détermine la direction dans laquelle les éléments de la deuxième ligne sont ajoutés après un saut de ligne.

justifier-contenu (alignement sur l'axe principal)

Alignement sur l'axe vertical

flex-basis définit la taille initiale (et non la largeur) occupée par l'élément flexible sur l'axe principal.

Si flex-basis, width et height sont définis en même temps, ces dernières seront automatiquement écrasées.

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

fr : Le fr ici est proportionnel à la hauteur du conteneur en grille. (S'il n'y a pas de hauteur, elle sera calculée en fonction de la hauteur du contenu.)

Avis

Compétence