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

Mehrere häufig verwendete Methoden zum Zentrieren von CSS-Boxen (Zusammenfassung)

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

Mehrere häufig verwendete Methoden zum Zentrieren von CSS-Boxen (Zusammenfassung)

Analyse des GTK-Treeview-Prinzips und der Verwendung

WeChat Mini-Programm Lotterienummerngenerator

HTML- und CSS-Grundlagen (unbedingt lesen)

Eine kurze Diskussion über die Matching-Regeln von Host und Benutzer, wenn Mysql eine Verbindung zur Datenbank herstellt

JS implementiert das Schere-Stein-Papier-Spiel

Einführung in das Layout des HTML-Seitenquellcodes_Powernode Java Academy

Verwenden Sie Node-Media-Server, um einen einfachen Streaming-Media-Server zu erstellen

Beispielcode zur Implementierung eines bildadaptiven Containers mit CSS

Schreiben Sie ein Publish-Subscribe-Modell mit JS

Artikel empfehlen

mysql8.0.23 Linux (Centos7) Installation vollständiges und ausführliches Tutorial

Hinweise zur IE8-Kompatibilität, die mir aufgefallen sind

Der Unterschied und die Verwendung von LocalStorage und SessionStorage in Vue

Beispielcode für die Master-Slave-Trennung einer MySQL-Datenbank

Webdesign-Tipps für Formular-Eingabefelder

Prinzip und Anwendung der MySQL-Verbindungsabfrage

Transplantieren des Befehls mkfs.vfat in Busybox unter Linux

Beispielverwendung des Linux-Komprimierungsdateibefehls „zip“

Eine kurze Analyse der Verwendung von USING und HAVING in MySQL

So zeichnen Sie in CocosCreator ein cooles Radardiagramm

So unterstützen Sie vollständiges Unicode in MySQL/MariaDB

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.20

So stellen Sie Gitlab mit Docker-Compose bereit

JavaScript, um die Idee des Schlangenspiels umzusetzen

Beispielcode für horizontales Balkendiagramm von Echarts Bar