Wenn ich HTML und CSS gestalte, wird das Layout nicht so gut aufgebaut, wie ich es mir vorstelle.

Ich habe in der Vergangenheit oft Google gefragt.

Kürzlich habe ich mir ein Video von Zerocho über Developer Talks angesehen und beschlossen, die Grundlagen von CSS zu lernen.

- Ich möchte Blockelemente, Inline-Elemente, Ränder und Ausrichtung verstehen.

Ich weiß es zwar schon aus Erfahrung, aber es ist notwendig, es zu notieren.

■ Wenn Sie CSS ändern müssen, müssen Sie es aus Erfahrung anwenden und es so implementieren, wie es aussieht. Wenn Sie dies jedoch tun, können bei Responsive Design Probleme auftreten oder die Wartung in Zukunft kompliziert werden.

1. Normaler Fluss

- Es gibt nichts Besonderes zu beachten. Alle Elemente werden von oben nach unten und von links nach rechts angeordnet.

* Wissen Sie, wie man HTML-Tags in Durumis einfügt und sie dann verschwinden?;;

 <div>
     <p>Erster Absatz</p>
     <p>Zweiter Absatz</p>
     <span>Inline-Element 1</span>
     <span>Inline-Element 2</span>

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

 Erster Absatz
 Zweiter Absatz

2. BFC (Block Formatting Context)

- Wird hauptsächlich zur Layoutgestaltung verwendet. (Blöcke werden erstellt und darin Inline-Elemente.)

- Dies ist die Art und Weise, wie Blockebenenelemente gestapelt werden.

- Blockebenenelemente sind wie folgt:

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>

- Sie nehmen die gesamte Breite des übergeordneten Elements ein, unabhängig von der Länge des Inhalts im Element. (eine Zeile)

- Sie können Blöcke in Blöcke oder Inline-Elemente einfügen.

- Sie können Breite, Höhe, Rand und Abstand einstellen.

 <div style="padding :10px;"> 
     <h1>Titel</h1>
     <p>Dies ist ein kurzer Absatz. </p>

- Es werden zwei Zeilen im div-Tag erstellt.

- Wenn ein BFC erstellt wird, ist dies wie folgt. Sie können dies von Zeit zu Zeit überprüfen.

• Wenn die float-Eigenschaft nicht none ist
• Wenn die Position absolut oder fest ist
• Wenn die Anzeige inline-block, table-cell, table-caption, flex, inline-flex, grid, inline-grid ist
• Wenn der Überlauf nicht sichtbar ist, usw.
  
  

3. IFC (Inline Formatting Context)

<p>
    Hallo! <strong> Durumis </strong> Dies ist der zweite Beitrag!
    <span style="color: pink;">Gefällt mir</button> Klicken Sie auf die Schaltfläche.

- Wird innerhalb von Blockelementen erstellt. (keine Zeilenweise)

- Breite und Höhe können nicht direkt eingestellt werden. (Sie nehmen nur die Größe des Inhalts ein.)

- Nur horizontale Abstände und Ränder können angewendet werden.

- Nur Inline-Elemente können in Inline-Elemente aufgenommen werden.

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

Wann wird es also verwendet?

- BFC wird verwendet, um die Interaktion mit float oder die Kompensation von Rändern zu behandeln.

1. Interaktion mit float

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

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

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

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

<div class="parent" style="display: inline-block;">
    <div class="child" style="float: left;">...</div>

2. Margin-Kompensation

- CSS überlappt den oberen und unteren Rand benachbarter Tags.

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

<div style="margin-bottom: 100px;">
..
</div>
<div style="margin-top: 50px;">
,,

- Fügen Sie in dieser Situation ein neues BFC-Element zwischen die beiden Tags hinzu.

<div style="margin-bottom: 100px;"></div> 

<div style="overflow: auto;"></div> <!-- neues bfc-->

Ps. Wissen Sie, wie man HTML in Durumis kopiert und einfügt?;;