Der Unterschied und die Verwendung zwischen div und span

Als Nächstes erfahren Sie mehr über die Erstellung von HTML-Webseiten bei der Entwicklung mit Div+CSS, insbesondere über die Unterschiede und die Verwendung von Div und Span bei der Tag-Anwendung. Wenn ein Anfänger Webstandards (div CSS) verwendet, um eine Webseite zu entwickeln, ist die erste Frage, auf die er stößt, was der Unterschied zwischen div und span ist, wann div und wann span-Tags verwendet werden sollen.

Im Folgenden finden Sie eine Einführung in die Systemstandards, wenn für die Entwicklungswebseite kein CSS-Stil festgelegt ist.

1. Unterschiede und Merkmale zwischen DIV und SPAN

Unterschied zwischen Div und Span

Die von div eingenommene Position ist eine Zeile,
Der Bereich nimmt den gleichen Platz ein wie der Inhalt, wie in der folgenden Abbildung dargestellt.

Screenshot des Span-Tag-Anwendungsfalls

2. Span-Tag-Zusammenfassung

Beim Entwickeln von Webseiten können Sie sowohl Div als auch Span verwenden und es ist im Allgemeinen klar, dass es keinen Unterschied gibt. Beachten Sie jedoch, dass div eine Zeile einnimmt, span hingegen nicht. Die Breite von span entspricht der Breite des Inhalts.

Im Allgemeinen wird div für das Layout von Webseiten verwendet, das p-Tag für Absatzinhalte und span wird verwendet, um den Stil oder die Farbe eines Teils des Absatzinhalts festzulegen.

3. Erweiterung und Verbesserung

Der Span innerhalb des Div muss nicht die CSS-Selektor-Pseudoklasse benennen, wie unten gezeigt

Wenn die Klasse von div yangshi ist, legen Sie das CSS-Attribut für den Span darin fest. Der Code lautet wie folgt
.yanshi span{Attribut und Attributwert}

4. Demonstrationseffekt des Legendenbeispiels

Aus der Analyse der obigen Abbildung können wir schließen, dass span nicht mit einem Pseudoklassennamen benannt werden muss und dass der CSS-Stil für span direkt mithilfe von CSS-Vererbungsattributen festgelegt werden kann. Der ursprüngliche Stil des Div besteht darin, den Text auf Blau zu setzen, aber der Stil des Span wird durch Vererbung auf Rot gesetzt.

Ich hoffe, die auf der divcss5-Website zusammengefassten CSS-Fälle sind für Sie hilfreich. Hier ist ein technischer Artikel, der die Unterschiede und die Verwendung von div und span erklärt.

F: Was ist der Unterschied zwischen DIV und SPAN?

Antwort: Lösung:

Das größte Merkmal von DIV- und SPAN-Elementen besteht darin, dass standardmäßig keine Formatierung oder Darstellung der Objekte innerhalb der Elemente erfolgt. Wird hauptsächlich zum Anwenden von Stylesheets verwendet. Der offensichtlichste Unterschied zwischen den beiden besteht darin, dass DIV ein Blockelement ist, während SPAN ein Inline-Element (auch übersetzt als eingebettetes Element) ist.

Konkrete Schritte:

1. Blockelemente sind Elemente, die in einer neuen Zeile mit dem Rendern beginnen, während Inline-Elemente nicht in einer neuen Zeile beginnen müssen. Sie werden es besser verstehen, wenn Sie den folgenden Code testen:
Test <span> wird unmittelbar nach dem vorherigen „Test“ angezeigt </span> <div> wird hier in einer neuen Zeile angezeigt </div>
2. Blockelemente und Inline-Elemente sind nicht statisch. Sie können durch Definieren des Anzeigeeigenschaftswerts von CSS ineinander konvertiert werden, beispielsweise:
Test <div style="display:inline">Unmittelbar nach der vorherigen Anzeige "Test"</div> <span style="display:block">Hier wird in einer separaten Zeile angezeigt</span>
Tipp: Wenn Sie für das DIV-Element keine CSS-Eigenschaften definieren, ist seine Anzeigewirkung dieselbe wie beim P-Element.

Aufgrund der besonderen Natur von DIV- und SPAN-Elementen werden sie im Allgemeinen verwendet, um Stylesheets anzuwenden, z. B. indem sie mit CSS als Ebenen definiert werden. Was unterschieden werden muss, ist der Unterschied zwischen Blockelementen und Inline-Elementen sowie die Konvertierung zwischen beiden.

DIV gibt den Container zum Rendern von HTML an.
SPAN gibt einen Inline-Textcontainer an.
Im Allgemeinen nimmt ein Div einen Block ein und sein Standardanzeigeattribut ist Block, was einen Block bedeutet. wie:
<div>aaa</div>bbb wird in zwei Zeilen angezeigt.
Das Standardanzeigeattribut von span ist „inline“, was bedeutet, dass es miteinander verbunden werden kann. Beispiel: <span>aaa</span>bbb, es wird als eine Zeile angezeigt.
„Div“ wird im Allgemeinen für den Schriftsatz verwendet, während „span“ im Allgemeinen für die lokale Textformatierung verwendet wird.