Un CSS de A à Z

Cela m'inspire du fait que j'entre dans une pièce pour trouver mes parents et mon neveu essayant de faire une analyse de A à Z des voitures.

Une accessibilité

Ce que beaucoup de gens oublient, mais je pense que c'est tout aussi important que la réactivité.

Bloc B

Perpendiculaire au sens d'écriture.

C calcul

Faire des calculs en CSS. Très pratique.

Affichage D

bloc, en ligne, bloc en ligne, flex, inline-flex, grille, grille en ligne, aucun, etc

E : vide

Une pseudo-classe utile pour styliser des éléments sans enfants. Tant qu'ils ne contiennent aucun espace blanc.

Boîte flexible F

Quand j'ai commencé CSS, j'ai appris en regardant l'inspecteur et en jouant avec les choses. Et puis j'ai copié quelqu'un qui faisait ses mises en page avec des flotteurs. Et c’était tellement difficile de positionner les choses. L'apprentissage de Flexbox a fait toute la différence.

Grille G

Ce qui me semble toujours être le frère plus compliqué et plus puissant de Flexbox.

Hauteur H

Combien d'espace quelque chose prend horizontalement.

je suis en ligne

Le sens d'écriture. Vraiment utile pour le centrage, où vous pouvez utiliser margin-inline : auto.

J justifier

Dans Flexbox Zombies, vous utilisez votre laser de justification pour cibler les zombies dans la direction dans laquelle vous tirez.

K @keyframes

Étapes d'animation.

Hauteur de ligne L

Peut rendre le texte totalement illisible s'il est trop grand ou trop petit.

Marge M

Espace autour d'un élément qui n'agrandit pas l'élément.

N aucun

Utile pour arrêter d'afficher quelque chose ou de supprimer les bordures.

O ajustement d'objet

Bien qu'il semble que cela existe depuis toujours, je suis tombé sur quelque chose il y a quelque temps qui était relativement. Il incluait du JavaScript que quelqu'un avait écrit pour faire face au fait que l'ajustement d'objet était nouveau et ne fonctionnait pas encore dans tous les navigateurs.

Rembourrage P

Espacement autour de l'élément qui agrandit l'élément. Le remplissage négatif n’est pas une chose comme la marge négative.

Requêtes Q

Requêtes multimédias et requêtes conteneurs, utilisées pour la conception réactive et l'accessibilité.

Réactivité R

Important pour vous assurer que votre site s'adapte à tous les écrans. Cela semble assez basique, mais il existe de nombreux sites qui ne s'adaptent pas correctement à certaines tailles.

Spécificité S

Cela devient pénible lorsque vous essayez de remplacer les styles d'un tiers. Bien que récemment, j'ai vu des plugins CMS utiliser :where, ce qui aide beaucoup.

Texte T

Parfois utilisé pour le style des polices. Et parfois, vous utilisez une police. Sauf si vous souhaitez changer la couleur du texte, auquel cas ce n'est ni l'un ni l'autre.

Unités U

Les plus utilisés d'entre eux sont %, px, em et rem. Également fr dans les grilles et s et ms dans les transitions et animations.

Visibilité en V

Intéressant, le contraire du visible est caché. Ce qui n’est pas ce que l’on pourrait logiquement penser.

Largeur W

Combien d'espace quelque chose prend horizontalement.

X débordement-x

Un peu de triche pour x, mais il n'y a rien qui commence par x. Cela contrôle le débordement horizontal. x est également utilisé avec Tailwind où par exemple mx est la marge horizontale.

Y débordement-y

Comme pour x, cela contrôle le débordement vertical. Et y désigne généralement la verticale dans Tailwind.

Z indice z

L'indice z le plus élevé/le plus bas que vous pouvez utiliser est (-)2 147 483 647. Ou l'infini vous donnera la même chose. Mais taper un 9 et se demander ensuite pourquoi cela ne fonctionne pas est une méthode beaucoup plus simple.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!