Grundlegende CSS-Regeln (Normaler Fluss, BFC, IFC)

Wenn man HTML und CSS zeichnet, wird das Layout oft nicht so gut, wie man es sich vorgestellt hat.

Ich habe in der Vergangenheit oft bei Google nachgefragt.

Vor kurzem habe ich mir ein Entwickler-Talk-Video von Zerocho angesehen und beschlossen, die Grundlagen von CSS zu lernen.

- Ich möchte Blockelemente, Inline-Elemente, Margin und Ausrichtung verstehen.

Ich kenne das zwar schon aus Erfahrung, aber ich muss es trotzdem aufschreiben.

■ Wenn ich CSS ändern muss und es nur nach Gefühl anwende und nach dem Sichtbaren implementiere, kann es bei responsivem Design zu Problemen kommen oder die spätere Wartung wird komplexer.

1. Normal Flow

- Man muss sich nichts Besonderes überlegen. Alle Elemente werden von oben nach unten und von links nach rechts angeordnet.

* Wenn man bei durumis (두루미스) Text schreibt und HTML-Tags einfügt, verschwinden diese. Kennen Sie eine Lösung dafür?;;

- Mit dem p-Tag werden zwei Blöcke erstellt, und das span-Tag wird in einer Zeile gezeichnet.

2. BFC (Block Formatting Context)

- Wird hauptsächlich für die Layoutgestaltung verwendet. (Block erstellen und darin Inline-Elemente erstellen.)

- Dies ist die Art und Weise, wie Block-Level-Elemente gestapelt werden.

- Folgende Elemente sind Block-Level-Elemente.

- Unabhängig von der Länge des Inhalts innerhalb des Elements nimmt es die gesamte Breite des übergeordneten Elements ein. (Eine Zeile)

- In einen Block können weitere Blöcke oder Inline-Elemente eingefügt werden.

- Width, Height, Margin und Padding können eingestellt werden.

- Innerhalb des div-Tags werden zwei Zeilen erstellt.

- Wann ein BFC erstellt wird, ist wie folgt. Man kann es sich bei Bedarf ansehen.

Wenn die float-Eigenschaft nicht none ist
Wenn position absolute oder fixed ist
Wenn display inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid ist
Wenn overflow nicht visible ist usw.

3. IFC (Inline Formatting Context)

- Wird innerhalb von Blockelementen erstellt. (Keine Zeilenumbrüche)

- Width und Height können nicht direkt festgelegt werden. (Nimmt nur die Größe des Inhalts ein.)

- Es kann nur horizontales Padding und Margin angewendet werden.

- In ein Inline-Element können nur Inline-Elemente eingefügt werden.

<span>, <a>, , <img>, <input> usw.

Wann wird es also verwendet?

- BFC wird verwendet, um die Interaktion von Float und die Margin-Kompensation zu behandeln.

1. Float-Interaktion

- Wenn man einem Kind einen freien Stil gibt, kann das Elternteil es nicht umschließen.

(float, position absolute, fixed, display inline-block usw...)

- In diesem Fall wird ein BFC für das übergeordnete Element verwendet, um das Layout zu erstellen.

(Wenden Sie display: inline-block, overflow: auto oder float: left auf das übergeordnete Tag an.)

2. Margin-Kompensation

- In CSS überlappen sich die oberen und unteren Ränder von zwei benachbarten Tags.

Beispiel) Der vertikale Abstand zwischen den beiden folgenden div-Tags beträgt nicht 150 px, sondern 100 px.

- In der obigen Situation fügen wir ein neues BFC-Element zwischen die beiden Tags ein.

PS. Kennen Sie eine Möglichkeit, HTML in durumis (두루미스) einzufügen?;;