L'article précédent qui vous a été présenté est "Comment ajouter une image d'arrière-plan à un bouton en CSS (Explication détaillée et exemples)》Le contenu est une conception artistique. Cet article dit : CSS n'est pas une science mais un art. Amis, venez jeter un oeil.
Au cours des six derniers mois, je n'ai jamais rencontré de bon problème frontal sur Zhihu, et cette question m'a touché le cœur. Au cours de la dernière année d’enseignement, les étudiants ont constamment essayé de comprendre le CSS de manière rationnelle, mais tous se sont soldés par un échec. Je leur dis qu'il n'y a pas de logique dans CSS ! Ils n'y croient pas. Cette question et cette réponse peuvent très bien expliquer ma compréhension.
Voici mes réponses.
Réponse courte : Parce que CSS n'est pas orthogonal.
Réponse longue :
Permettez-moi d'abord de vous expliquer ce qu'est l'orthogonalité.
Ajustez la « luminosité », la « teinte » et la « saturation » du moniteur.
"Orthogonal" signifie que lorsque vous ajustez l'un des trois, cela n'affecte pas les effets des deux autres.
« Orthogonal » semble être une évidence, non ?
Imaginez la situation « non orthogonale » : lorsque vous ajustez la « luminosité », la « teinte » et la « saturation » changeront de manière irrégulière. Si tel est le cas, vous mourrez d’envie de l’ajuster car il sera difficile de l’ajuster à l’effet souhaité.
Et CSS n'est "pas orthogonal".
Je prends l'impact de la largeur sur la marge gauche comme exemple, en supposant le code suivant :
.parent La largeur du .child à l'intérieur est de 300px. Maintenant, j'y ajoute une marge gauche : -10px, et vous constaterez que
L'ensemble du .child se déplace de 10 pixels vers la gauche
D'accord, nous savons donc que margin-left: -10px déplacera l'élément entier vers la gauche. Est-ce vraiment le cas ? À ce stade, supprimez la largeur et réexpérimentez, c'est avant d'ajouter la marge gauche :
C'est après avoir ajouté la marge gauche : 
Nous avons constaté que margin-left: -10px ne déplaçait pas l'élément entier vers la gauche, mais déplaçait seulement le bord gauche vers la gauche , et le bord droit n'a pas bougé.
Résumons maintenant :
Si la largeur est spécifiée, alors margin-left: 10px déplacera l'élément entier vers le left
Si la largeur n'est pas spécifiée, alors margin-left : 10px déplacera uniquement le bord vers la gauche (c'est-à-dire agrandira la largeur)
Regardez À ce stade, vous sentirez que CSS est particulièrement non orthogonal :
Pourquoi l'existence de la largeur affecte-t-elle la fonction de marge gauche ?
Existe-t-il d'autres attributs que la largeur qui affectent également la fonction de marge gauche ? J'ai bien peur que vous ne puissiez pas le savoir.
C'est l'horreur de la non-orthogonalité. Vous ne pouvez connaître les vraies règles de margin-left qu'en utilisant toutes les propriétés avec margin-left.
Ceci n'est que l'impact de deux attributs. Pouvez-vous imaginer l'impact de trois attributs l'un sur l'autre ?
Permettez-moi de vous donner un deuxième exemple. Tout le monde connaît cette position : fixe est positionné par rapport à la fenêtre.
Mais cette "vérité" sera affectée par un autre élément... Oui, je sais que vous êtes choqué...
Regardons d'abord la situation normale :
Sur le côté droit de la page Web se trouve un iframe. L'élément rouge .fixed est positionné par rapport au coin supérieur gauche de la fenêtre iframe, ce qui est cohérent avec nos attentes.
Ensuite, j'ajouterai un attribut en CSS3 au .box, ce qui changera votre perception :
Parent Après l'ajout transformé en conteneur, les éléments positionnés fixes sont en fait positionnés par rapport au conteneur parent.
Qui sait si d'autres éléments seront ajoutés au CSS à l'avenir pour affecter ce que je crois déjà être la vérité ?
C'est ce qui est dégoûtant avec le "non orthogonal".
Permettez-moi de vous donner un autre exemple. Tout le monde sait que l'ajout de margin: 0 auto à un p de largeur fixe peut le centrer horizontalement. Beaucoup de gens se demandent pourquoi margin: auto est 0 (notez que les positions de auto et. 0 sont inversés) ne peut-il pas être centré verticalement ?
En fait, c'est possible :
Mais l'élément actuel doit avoir la position : absolue ; haut : 0 ; bas : 0 ; peut être centré verticalement. C'est très "non orthogonal".
Comment apprendre des choses « non orthogonales » ?
Il n'y a qu'un seul moyen : essayer.
Plus vous essayez de combinaisons, plus vous comprendrez divers phénomènes étranges.
Il n'y a pas d'autre moyen.
Actuellement, les attributs couramment utilisés en CSS comptent pour 50. Il y a 50 * 49 / 2 = 1225 situations pour les deux combinaisons d'attributs, et 50 * 49 * 48 / 6 = 19600 situations pour les trois combinaisons d'attributs. . Cela n'inclut pas l'interaction entre les éléments parents et enfants.
Jeune homme, essaie-le lentement au cours de ta vie.
Actuellement, nous savons que
La combinaison de différents attributs aura des effets différents ;
Les nouveaux attributs affecteront les connaissances que vous avez déjà acquises ;
Ces règles n'ont aucune logique, vous ne pouvez que les essayer.
C'est pourquoi CSS est difficile à apprendre.
D'après mon expérience, plus une personne est rationnelle, plus il est difficile de comprendre le CSS ; plus une personne est émotive, plus il est facile de comprendre le CSS.
C'est pourquoi la plupart des programmeurs back-end peuvent apprendre le JS mais pas le CSS : ils sont trop rationnels.
Voulez-vous apprendre le CSS de la même manière que vous apprenez la programmation ? Abandonner!
Vous devez apprendre CSS de la même manière que vous apprenez à dessiner : continuez à dessiner tous les jours, dessinez un œuf mille fois de différentes manières, et le tour est joué.
Alors j'ai dit quelque chose en classe :
Le CSS n'est pas une science, le CSS est un art.
P.S. J'ai appris le concept d'"orthogonalité" grâce à "L'art de la programmation Unix". Passez moins de temps sur Zhihu et lisez-en davantage.
Apprentissage recommandé : Tutoriel vidéo CSS
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
