Was sind HTML-Inline-Elemente und Block-Level-Elemente und ihre Unterschiede

Ich erinnere mich an eine Frage, die der Interviewer bei einem früheren Vorstellungsgespräch gestellt hat: „Was sind Inline-Elemente und worin unterscheiden sie sich von Elementen auf Blockebene?“ Dies ist eine sehr grundlegende Interviewfrage, aber viele Anfänger konzentrieren sich normalerweise nur auf die Semantik von Tags und ignorieren die Inline- und Blockebeneneigenschaften von Tags. Daher können sie die obige Frage möglicherweise nicht oder nur unvollständig beantworten.

Häufige Inline-Elemente in HTML sind:

Es gibt auch einige Textelemente wie: <br>, <b>, <strong>, <sup>, <sub>, <i>, <em>, <del>, <u> usw.

Es wäre unangemessen, nur <span> und <img> zu beantworten.

Häufige Blockelemente in HTML sind:

<div>, <Tabelle>, <Formular>, <p>, <ul>,

<h1>......<h6>, <hr>, <pre>, <address>, <center>, <marquee>, <blockquote> usw.

Wenn ich nur <div> antworte, wäre das unangemessen.

Was ist also der Unterschied zwischen ihnen?

Elemente auf Blockebene

1. Beginnen Sie immer in einer neuen Zeile, d. h. jedes Element auf Blockebene nimmt standardmäßig eine Zeile ein und ist vertikal nach unten angeordnet.

2. Höhe, Breite, Rand und Polsterung sind alle steuerbar und die Einstellungen sind wirksam, mit Randeffekten;

3. Wenn die Breite nicht festgelegt ist, beträgt der Standardwert 100 %.

4. Blockelemente können Blockelemente und Inline-Elemente enthalten.

Inline-Elemente

1. In einer Reihe mit anderen Elementen, d. h. Inline-Elemente und andere Inline-Elemente sind in einer horizontalen Linie angeordnet;

2. Höhe und Breite sind nicht steuerbar und die Einstellungen sind ungültig. Sie werden durch den Inhalt bestimmt.

Das Einstellen des Randes wirkt sich links und rechts aus und hat einen Randeffekt.

Durch das Festlegen der Ränder oben und unten wird der Abstand erweitert, es wird jedoch kein Randeffekt erzeugt (d. h. das Boxmodell „Rand oben/unten“ weist Werte auf, es gibt jedoch keinen Randeffekt auf der Seite).

Die Einstellung der Polsterung links und rechts ist effektiv. Die Einstellung der Polsterung oben und unten erweitert den Abstand, erzeugt jedoch keinen Randeffekt (wie oben).

Der Polstereffekt wird unten dargestellt:

<!DOCTYPE html>
<html>
   <Kopf>
      <meta charset="UTF-8">
   </Kopf>
	<Stil>
		Spanne{
			Rand: 1px durchgehend rot;
			Polsterung: 10px;
		}
		div{
			Rand: 1px, durchgehend blau;
		}
	</Stil>
   <Text>
	   <div>Element auf Blockebene</div>
	   <span>Inline-Element</span>
	   <span>Inline-Element</span>
	   <div>Element auf Blockebene</div>
   </body>
</html>

3. Gemäß dem Konzept der Tag-Semantik sollten Inline-Elemente nur Inline-Elemente und keine Elemente auf Blockebene enthalten.

Konvertierung

Natürlich können die Eigenschaften zwischen Blockebenenelementen und Inline-Elementen ineinander umgewandelt werden. HTML kann Elemente in drei Typen unterteilen: Inline-Elemente, Blockelemente und Inline-Block-Elemente.

Verwenden Sie die Anzeigeeigenschaft, um die drei in Folgendes umzuwandeln:

(1) Anzeige: inline; in Inline-Elemente umgewandelt;

(2) display:block; in Blockelemente umgewandelt;

(3) Anzeige: Inline-Block; In ein Inline-Blockelement umwandeln.

Inline-Blockelemente kombinieren die Eigenschaften von Inline-Elementen und Blockelementen:

(1) Kein automatischer Zeilenumbruch, und alle anderen Inline-Elemente werden auf einer horizontalen Linie angeordnet;

(2) Höhe, Breite, Rand und Polsterung sind alle steuerbar und die Einstellungen sind wirksam, mit Randeffekten;

(3) Die Standardanordnung ist von links nach rechts.

Damit ist dieser Artikel über HTML-Inline-Elemente und Block-Level-Elemente und ihre Unterschiede abgeschlossen. Weitere Informationen zu HTML-Inline-Elementen und Block-Level-Elementen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Docker-Bereitstellungs- und Installationsschritte für Jenkins

>>: Mit CSS3 erstellte Buchseitenumblättereffekte

So überprüfen Sie die Festplattennutzung unter Linux

Was sind HTML-Inline-Elemente und Block-Level-Elemente und ihre Unterschiede

So überprüfen Sie die Festplattennutzung unter Linux

Verwenden von React+Redux zum Implementieren der Zählerfunktion und aufgetretene Probleme

Zusammenfassung der Tipps zur CSS-Verwendung

mysql-5.7.21-winx64 kostenlose Installationsversion Installation - Windows-Tutorial detaillierte Erklärung

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17

Detaillierte Untersuchung der MySQL-Mehrversions-Parallelitätskontrolle MVCC

Installations- und Konfigurationstutorial von MongoDB unter Linux

Detaillierte Erklärung der Rolle des Schlüssels in React

MySQL Master-Slave-Prinzip und Konfigurationsdetails

JavaScript zum Erzielen eines Dropdown-Menüeffekts

Artikel empfehlen

So zentrieren Sie Ihre HTML-Schaltfläche

Erfahren Sie mehr über den Hyperlink A-Tag

Docker implementiert Container-Portbindung am lokalen Port

Warum kann MySQL bei der Verwendung von Zeitstempeln Zeitzonenprobleme ignorieren?

MySQL 5.7.20 Zip-Installations-Tutorial

Über die Position des H1-Tags in XHTML

Zusammenfassung der Verwendung spezieller Operatoren in MySql

Erfahrung im Selbststudium von CSS-Optimierungsfähigkeiten

Detaillierte Erläuterung zum Erstellen eines kontinuierlichen Integrationsclusterdienstes basierend auf Docker-Swarm

Mehrere Implementierungsmethoden der Tab-Leiste (empfohlen)

Entwickeln Sie Beispielcode für einen Taschenrechner mit nativem JavaScript

So verwenden Sie das Name-Attribut und das ID-Attribut des A-Tags, um innerhalb der Seite zu springen

HTML verwendet Formular-Tags, um den Beispielcode der Registrierungsseite zu implementieren

Wie CSS die Zeit des weißen Bildschirms während des ersten Ladens beeinflusst

Detaillierte Erklärung des Linux-Befehls unzip