CSS ist verwirrend? Du bist nicht allein

Als ich meine Reise in die Webentwicklung begann, begann ich, wie alle anderen auch, mit den Grundlagen: HTML lernen, dann CSS und dann JavaScript. Ich wollte einfach so schnell wie möglich Dinge bauen, also habe ich nur so viel gelernt, dass ich mir erlauben konnte, mit Bauprojekten zu beginnen, und dann habe ich nach neuen Dingen gesucht, wenn ich darauf gestoßen bin oder das Bedürfnis dazu verspürt habe.
Ein Vorteil dieser Methode war, dass ich kleine Projekte schnell erstellen konnte, aber es gibt auch einen großen Nachteil dieser Methode, dass sie viele Lernlücken hinterlässt.

Schneller Vorlauf zum Präsentieren: Ich lerne gerade ReactJS und es macht mir Spaß, aber wenn es um das Stylen von Komponenten ging, war es einfach frustrierend und kontraintuitiv, weil mir CSS einfach nicht ganz klar vorkam mein Kopf. Ich habe einfach Eigenschaften hinzugefügt, um die gewünschten Ergebnisse zu erzielen, aber irgendwann fühlte es sich an, als würde ich auf einer alten Brücke laufen und darauf warten, bei einer falschen Bewegung einzustürzen.

Es stellte sich heraus, dass CSS nicht so verwirrend oder schwierig ist, wie ich dachte. In Wirklichkeit hatte ich einfach nicht das richtige mentale Modell für CSS.
Im Allgemeinen stellen sich Menschen CSS als eine Sammlung von Eigenschaften (Schlüssel-Wert-Paare) vor, um ein gewünschtes Aussehen oder eine gewünschte Anordnung zu erreichen. Aber das hat sich für mich jetzt geändert und wird sich hoffentlich am Ende dieses Artikels auch für Sie ändern.

1. Stellen Sie sich CSS nicht als eine Sammlung von Eigenschaften vor. Stellen Sie sich CSS vielmehr als eine Sammlung von Layoutmodi vor

• CSS besteht aus vielen verschiedenen Layout-Algorithmen, sogenannten Layout-Modi.
• Jeder Layoutmodus ist wie eine eigene Untersprache innerhalb von CSS, die die Verwendung von CSS-Eigenschaften neu definieren und ändern kann. Mit anderen Worten: CSS-Eigenschaften werden in diese Algorithmen eingegeben. Konzentrieren Sie sich also darauf, wie diese Algorithmen diese Eigenschaften verwenden, anstatt sich eine Reihe von Eigenschaften zu merken.

2.Jedes Layout ist darauf ausgelegt, ein bestimmtes Problem zu lösen

• Der Standardlayoutmodus: Normal Flow ist für die Erstellung digitaler Dokumente gedacht.
• Es ähnelt dem Layout-Algorithmus von MS Word. dh. Überschriften und Absätze werden vertikal als Blöcke gestapelt, während sich Dinge wie Text, Links und Bilder in diesen Blöcken befinden.
• Neben dem normalen Ablauf sind zwei weitere Layoutmodi, die Sie am häufigsten verwenden, das Flexbox- und das Rasterlayout.

3.Flexbox- und Grid-Layout-Modi

• Auch hier wurde jeder Layoutmodus erstellt, um ein bestimmtes Problem zu lösen. Stellen Sie sich das so vor: Welches Problem löst Flexbox?

• Bei Flexbox geht es um die Anordnung einer Gruppe von Elementen in einer Zeile oder Spalte mit enormer Flexibilität und Kontrolle darüber, wie jedes Element innerhalb der Gruppe verteilt und ausgerichtet wird.

• Welches Problem löst Grid?
  CSS Grid erleichtert das zweidimensionale Anordnen und Ausrichten einer Gruppe von Elementen. Es gibt Ihnen Flexibilität und Kontrolle über jedes einzelne Element oder über Zeilen/Spalten von Elementen, um deren Anordnung zu ändern.

Sobald Sie anfangen, CSS im Sinne einer Sammlung von Layoutmodi zu betrachten und wie diese CSS-Eigenschaften beeinflussen und ändern, erhalten Sie ein klareres mentales Modell davon, wie die Dinge geschehen, selbst wenn sich das CSS über viele Zeilen erstreckt.

Das obige ist der detaillierte Inhalt vonCSS ist verwirrend? Du bist nicht allein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!