* > * Wenn wir über CSS-Layout sprechen, müssen wir etwas im Voraus wissen. Für verschiedene HTML-Tags/-Elemente kann eine Klassifizierung auf Blockebene erfolgen: entweder Block (Blockelement) oder Inline ( Inline-Element ): Eigenschaften von Blockelementen: * Immer starten in einer neuen Zeile; * Höhe, Zeilenhöhe sowie oberer und unterer Rand können alle gesteuert werden; * Die Breite beträgt standardmäßig 100 % des Containers, in dem sie sich befindet, sofern keine Breite festgelegt ist. Eigenschaften des Inline-Elements: * und andere Elemente befinden sich in derselben Zeile * Höhe, Zeilenhöhe sowie oberer und unterer Rand können nicht geändert werden; * Breite ist der Text oder das Bild passt sich an. Die Breite kann nicht verändert werden. Ihre Eigenschaften und Anwendungen werden im Folgenden näher erläutert: ◎Blockelement (Blockelement) wird normalerweise als Container für andere Elemente verwendet und kann Inline-Elemente und andere Blockelemente aufnehmen. Wir wissen, dass Blockelemente standardmäßig in einer neuen Zeile nach unten angeordnet werden. Durch die Steuerung des Stils über CSS können wir diesen Standardlayoutmodus ändern und die Blockelemente an der gewünschten Stelle platzieren. Es sollte darauf hingewiesen werden, dass das Tabellen-Tag aus Sicht des Benutzers neben dem Unterschied in der Seitenladegeschwindigkeit auch eine Art Blockelement ist, das auf TabelleTabelle und Layout basiert. Die Tabelle wird in allen Inhaltselementen geladen und nach Abschluss angezeigt. Ansonsten gibt es keinen Unterschied. Aber dem Quellcode der Seite nach zu urteilen, ist der Unterschied sehr groß. Der auf dem Konzept einer guten Struktur basierende CSS-Layout-Quellcode kann es zumindest Benutzern ohne Erfahrung in der Webentwicklung leicht machen, fortlaufende Seiteninhalte zu finden. Aus dieser Perspektive sollte CSS-Layoutcode ein besseres ästhetisches Erlebnis bieten. Wir können uns die p von modular als Boxen vorstellen und sie dann nach unseren eigenen Wünschen zu vollständigen Inhalten anordnen. Das Weblayout-Design folgt dem gleichen Muster. * Blockelement * dir – Verzeichnisliste * p – häufig verwendete Blockebene ist auch das Haupt-Tag des CSS-Layouts * dl – Definitionsliste * Feld set – Formularkontrollgruppe * Formular – interaktives Formular (kann nur zur Aufnahme anderer Blockelemente verwendet werden) * h1 – großer Titel * h2 – Untertitel * h3 – Ebene 3 Titel * h4 – Überschriften der Ebene 4 * h5 – Überschriften der Ebene 5 * h6 – Überschriften der Ebene 6 * hr – horizontale Trennzeichen * 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 – Sortierform * p – Absatz * vorformatierter Text * Tabelle – Tabelle * ul – nicht sortierte Liste ◎Inline-Elemente basieren im Allgemeinen auf Basiselementen Die semantische Ebene kann nur Text oder andere Inline-Elemente aufnehmen. Um den Unterschied zwischen Block und Inline deutlich zu machen, können wir die Demonstration ihrer jeweiligen repräsentativen Elemente p und span zur Veranschaulichung verwenden: XXXXXXXXX Dies ist ein p-Layout XXXXXXXXX p beginnt in einer neuen Zeile, seine Form wird nicht durch den internen Text beeinflusst XXXXXXXDies ist ein Span-LayoutXXXXXXX Alle Elemente befinden sich in einer Zeile, span enthält nur den Text Inline-Element (Inline-Element) HTML-Tag-Klassifizierungsdetails * a – Anker * abbr – Abkürzung * Akronym – erstes Wort * b – fett (nicht empfohlen) * bdo – bidi override * big – große Schriftart * br – Zeilenumbruch * cite – quote * code – Computercode (erforderlich beim Zitieren von Quellcode) * dfn – Definieren das Feld Eingabe – Eingabefeld * kbd – Tastaturtext definieren * label – Tabellenbezeichnung * q – kurzes Anführungszeichen * s – Unterstrich (nicht empfohlen) * samp – Definitionsbeispiel Computercode * select – Elementauswahl * small – kleiner Schrifttext * span – häufig verwendeter Inline-Container, der Blöcke innerhalb von Text definiert * Strike – Unterstreichung * strong – Fetthervorhebung * sub – tiefgestellt * sup – hochgestellt * textarea – mehrzeiliges Texteingabefeld * tt – Telextext * u – Unterstrich * var – Variablen definieren ◎Variable Elemente basieren auf den beiden oben genannten und ändern sich mit der Umgebung. Ihr Grundkonzept besteht darin, basierend auf dem Kontext zu bestimmen, ob das Element ein Blockelement oder ein Inline-Element ist. Sobald seine Kategorie bestimmt ist, folgt es den Regeln für Block- oder Inline-Elemente. HTML-Tag-Klassifizierungsdetails für variable Elemente * Applet – Java-Applet * Schaltfläche – Schaltfläche * Entf – Löschen Text * Iframe – Inline-Frame * ins - eingefügter Text * Karte - Bildblock (Karte) * Objekt - Objekt Objekt * Skript - Client-Skript Aber durch CSS können wir die Einschränkungen der HTML-Tag-Klassifizierung in der obigen Tabelle beseitigen und die Attribute, die wir benötigen, frei auf verschiedene Tags/Elemente anwenden. Zum Beispiel können wir dem Blockelement-Tag [ul] das Attribut display:inline hinzufügen, um die ursprünglich vertikale Liste horizontal anzuzeigen. Dies wird häufig verwendet, wenn wir die Blog Navigation-Leiste festlegen Das Inline-Element [cite] fügt ein Attribut wie display:block hinzu, sodass es auch die Eigenschaft hat, jedes Mal in einer neuen Zeile zu beginnen. Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in HTML-Blockelemente und Inline-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
Was ist der Zweck des & lt; Fortschritts & gt; Element?
Mar 21, 2025 pm 12:34 PM
Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati
Was ist der Zweck des & lt; datalist & gt; Element?
Mar 21, 2025 pm 12:33 PM
Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159
Was ist der Zweck des & lt; Meter & gt; Element?
Mar 21, 2025 pm 12:35 PM
Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex
Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?
Mar 20, 2025 pm 05:56 PM
In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.
See all articles