Detaillierte Erläuterung von Blockelementen und Inline-Elementen in CSS

Ein Blockelement ist im Allgemeinen ein Containerelement für andere Elemente. Es kann Inline-Elemente und andere Blockelemente aufnehmen Insbesondere kann es nur zur Unterbringung anderer Blockelemente verwendet werden.

Ohne die Funktion von CSS werden die Blockelemente jeweils zeilenweise angeordnet. Mit CSS können wir das Standardlayout dieses HTML-Modus ändern Element, wo Sie es möchten, anstatt jedes Mal dumm eine neue Zeile zu beginnen. Es sollte darauf hingewiesen werden, dass das Tabellen-Tag auch eine Art Blockelement ist und im Allgemeinen ein tabellenbasiertes Layout und ein CSS-basiertes Layout verwendet werden (Sehbehinderte, Blinde usw. ausgenommen) gibt es keinen weiteren Unterschied zwischen den beiden Layouts außer der Seitenladegeschwindigkeit. Wenn ein normaler Benutzer jedoch versehentlich auf die Schaltfläche „Seitenquellcode anzeigen“ klickt, werden die beiden Layouts angezeigt Der von den Benutzern angezeigte CSS-Layout-Quellcode, der auf dem Konzept einer guten Rekonstruktion basiert, kann es zumindest normalen Benutzern ohne Erfahrung in der Webentwicklung ermöglichen, den Inhalt schnell zu verstehen Besseres ästhetisches Erlebnis.

Sie können sich das Block-Container-Element als eine Box vorstellen, oder wenn Sie mit dem Ausschneiden gespielt haben, wird es einfacher sein, die benötigten Artikel aus verschiedenen Zeitungen herauszuschneiden Der ausgeschnittene Inhalt ist ein Block. Dann kleben wir diese Papierstücke auf ein neues Blatt Papier, um Ihren eigenen, einzigartigen Auszug zu erstellen. Als Erweiterung der Technologie basieren auch

Inline-Elemente im Allgemeinen auf

Ebene (semantische) Elemente können nur Text oder andere Inline-Elemente aufnehmen,

was erklärt werden muss: Der chinesische Name für Inline-Elemente ist vielfältig. Inline-Elemente und direkte Elemente gibt es grundsätzlich nicht. Wenn es um Inline-Elemente geht, können wir mit diesem Attribut das berühmte IE-Double beheben Floating-Boundary-Problem

(Blockelement) und Inline-Element (Inline-Element) sind Konzepte in der HTML-Spezifikation. Der grundlegende Unterschied zwischen Blockelementen und Inline-Elementen besteht im Allgemeinen darin, dass Blockelemente in einer neuen Zeile beginnen Der Attributunterschied zwischen Blockelementen und Inline-Elementen wird nicht zum Problem. Wir können beispielsweise ein Attribut wie display:block zum Inline-Element hinzufügen, sodass es auch das Attribut hat, von einem neuen aus zu beginnen

jedes Mal

mit der Umgebung, basierend auf den beiden oben genannten. Das Grundkonzept besteht darin, dass er basierend auf dem Kontext bestimmen muss, ob das Element ein Blockelement oder ein Inline-Element ist. Variable Elemente gehören weiterhin zu den beiden oben genannten Elementkategorien. Sobald der Kontext ihre Kategorie bestimmt, müssen sie den Regeln von Blockelementen oder Inline-Elementen folgen.

Block- und Inline-Klassifizierungsdetails von HTML-Tags:

Blockelement (Blockelement)

div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode
◎ Adresse – Adresse ◎ Blockquote – Blockzitat ◎ Zentrum – Ausrichtungsblock ◎ Dir – Verzeichnisliste ◎ Div – häufig verwendete Bequemlichkeit auf Blockebene, auch das Haupt-Tag des CSS-Layouts ◎ dl – Definitionsliste ◎ Fieldset – Formularkontrollgruppe ◎ Formular – Interaktion Form◎ h1 – Überschrift ◎ h2 – Untertitel ◎ h3 – Überschrift der Ebene 3 ◎ h4 – Überschrift der Ebene 4 ◎ h5 – Überschrift der Ebene 5 ◎ h6 – Überschrift der Ebene 6 ◎ hr – Horizontale Trennlinie ◎ isindex – Eingabeaufforderung
◎ Menü – Menüliste ◎ Noframes – Frames optionaler Inhalt (zeigt diesen Blockinhalt für Browser an, die keine Frames unterstützen) ◎ Noscript – optionaler Skriptinhalt (zeigt diesen Inhalt für Browser an, die kein Skript unterstützen)
◎ ol – sortierte Form ◎ p – Absatz ◎ vorformatierter Text ◎ Tabelle – Tabelle ◎ ul – nicht sortierte Liste

Inline-Element (Inline-Element)

div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode
◎ a – Ankerpunkt ◎ abbr – Abkürzung ◎ Akronym – Anfangsbuchstabe ◎ b – fett (nicht empfohlen)
◎ bdo – Bidi-Überschreibung
◎ big – große Schriftart ◎ br – Zeilenumbruch ◎ cite – Zitat ◎ code – Computercode (erforderlich beim Zitieren von Quellcode)
◎ dfn – Felder definieren ◎ em – hervorheben ◎ Schriftart – Schriftarteinstellungen (nicht empfohlen)
◎ i – kursiv ◎ img – Bild ◎ input – Eingabefeld ◎ kbd – Tastaturtext definieren ◎ label – Tabellenbezeichnung ◎ q – kurzes Anführungszeichen ◎ s – Unterstreichung (nicht empfohlen)
◎ samp – definiert Beispielcomputercode ◎ select – Elementauswahl ◎ small – kleiner Schrifttext ◎ span – häufig verwendeter Inline-Container, definiert Blöcke innerhalb von Text ◎ Strike – Unterstreichung ◎ Strong – Fetthervorhebung ◎ Sub – Subscript ◎ Sup – Superscript ◎ Textarea – Eingabefeld für mehrzeiligen Text ◎ tt – Telextext ◎ u – Unterstreichung ◎ var – Variable definieren

Variables Element

div css xhtml xml Beispiel-Quellcode Beispiel-Quellcode
Ein veränderliches Element ist je nach Kontext ein Blockelement oder ein Inline-Element.
◎ Applet-Java-Applet
◎ Button – Button ◎ Entf – Text löschen ◎ Iframe – Inline-Frame
◎ ins – eingefügter Text ◎ map – Bildblock (Karte)
◎ Objekt – Objektobjekt ◎ Skript – Client-Skript