Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Was sind die Unterschiede zwischen SPAN-Elementen und DIV-Elementen_Erfahrungsaustausch?

WBOY
Freigeben: 2016-05-16 12:09:27
Original
1582 Leute haben es durchsucht

Als ich vor ein paar Tagen adaptives Skin machte, lernte ich die Bedeutung von Block kennen. Habe ein solches Problem gefunden.
Was ist der Unterschied zwischen SPAN-Element und DIV-Element?
Lösungsidee:
Der offensichtlichste Unterschied ist: DIV ist ein Blockelement und SPAN ist ein Inline-Element. Blockelemente entsprechen Inline-Elementen mit einem
-Zeilenumbruch davor und danach. Tatsächlich sind Blockelemente und Inline-Elemente nicht statisch. Solange display: inline für ein Blockelement definiert ist, wird das Blockelement zu einem Inline-Element. Wenn display: block für ein Inline-Element definiert ist, wird es tatsächlich zu einem Block Element.
Spezifische Schritte:


[Strg+A Alles auswählen Hinweis: Wenn Sie externe Js einführen müssen, müssen Sie zum Ausführen eine Aktualisierung durchführen ]

Tipp: Einige Freunde sagen, dass DIV ein Ebenen-Tag ist. In Dreamweaver ist es einfach so geschrieben, dass jedes Objekt zu einer „Ebene“ werden kann. Sie müssen nur das Positionsattribut für das Objekt definieren (der Wert ist absolut oder relavit). Um beispielsweise ein Bild zu einer „Ebene“ zu machen, können Sie den Code wie folgt schreiben:

Besondere Tipps
Der laufende Effekt dieses Beispielcodes (klicken Sie, um den Code auszuführen) wird der Reihe nach angezeigt Um das Problem besser zu veranschaulichen, werden hier die Blockelemente und Inline-Elemente mit einem 1 Pixel breiten roten durchgezogenen Rand hinzugefügt. Wie Sie auf dem Bild sehen können, definiert DIV standardmäßig den Anzeigeattributwert, um ihn inline anzuzeigen Als Inline-Element ist SPAN standardmäßig ein Inline-Element. Wenn der Attributwert Block ist, wird er als Blockelement angezeigt.
Besondere Hinweise

Dieses Beispiel erläutert hauptsächlich die Verwendung und Bedeutung der beiden Werte block und inline des Anzeigeattributs.
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage