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

MySQL häufig verwendete SQL und Befehle vom Eintrag bis zum Löschen der Datenbank und zum Weglaufen

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

MySQL häufig verwendete SQL und Befehle vom Eintrag bis zum Löschen der Datenbank und zum Weglaufen

Detaillierte Erläuterung der Wissenspunkte zur Linux-Remoteverwaltung und SSHD-Dienstüberprüfung

Detaillierte Erläuterung der Konstruktion und Verwendung von Redis5-Clustern unter Linux (Centos7)

So simulieren Sie Netzwerkpaketverlust und -verzögerung in Linux

Beispielcode für MySQL-Datensicherung und -wiederherstellung

Die Fallstricke bei der Beurteilung von NULL-Werten in MySQL

Mehrere allgemeine Beispielcodes für Weiterleitungsverbindungen in HTML

Bei der Verwendung von MySQL aufgetretene Probleme

So verwenden Sie den temporären MySQL 5.7-Tablespace, um Fallstricke zu vermeiden

Lösung für EF (Entity Framework)-Einfüge- oder Aktualisierungsfehler

Artikel empfehlen

Detaillierte Erläuterung des Überwachungsmethodenfalls von Vue

So verbergen und entfernen Sie Bildlaufleisten in HTML

Beispiel für eine Formatierungsmethode für Datum und Uhrzeit in js

Tutorial zum Bereitstellen von LNMP und Aktivieren des HTTPS-Dienstes

MySQL führt Befehle für externe SQL-Skriptdateien aus

Reiner CSS3-Code zur Implementierung einer laufenden Uhr

Frage zur Webseitenerstellung: Bilddateipfad

Methode und Einführung der Tabellenindexdefinition in MySQL

Sechs Vererbungsmethoden in JS und ihre Vor- und Nachteile

Node.js gibt je nach Anforderungspfad unterschiedliche Daten zurück.

Einführung in die wichtigsten Browser und ihre Kernel

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.6.15 unter Windows 8

Zusammenfassung einiger Gründe, warum geplante Crontab-Aufgaben nicht ausgeführt werden

Sortierung und Paginierung von MySQL-Abfragen

Reines CSS zur Realisierung der Platzhalteranimation und Eingabeüberprüfung für Eingabefelder