Inhaltsverzeichnis
Alle gängigen Browser unterstützen das display-Attribut.
Definition und Verwendung
Beschreibung
Syntax:
Heim Web-Frontend CSS-Tutorial Detaillierte Einführung in das Anzeigeattribut in CSS

Detaillierte Einführung in das Anzeigeattribut in CSS

May 27, 2017 pm 01:34 PM

CSS display Property

Alle gängigen Browser unterstützen das display-Attribut.

Hinweis: Wenn !DOCTYPE angegeben ist, unterstützt Internet Explorer 8 (und höher) die Attributwerte „inline-table“, „run-in“, „table“, „ table-caption“, „table-cell“, „table-column“, „table-column-group“, „table-row“, „table-row-group“ und „inherit“.

Definition und Verwendung

Das Anzeigeattribut gibt die Art der Box an, die das Element generieren soll.

Beschreibung

Dieses Attribut wird verwendet, um den Typ des Anzeigefelds zu definieren, das vom Element beim Erstellen eines Layouts generiert wird. Bei Dokumenttypen wie HTML kann die unvorsichtige Verwendung der Anzeige gefährlich sein, da sie möglicherweise die bereits in HTML definierte Anzeigehierarchie verletzt. Für XML ist die gesamte Anzeige unbedingt erforderlich, da XML nicht über diese Art von Hierarchie verfügt.

Hinweis: Die Werte compact und marker waren in CSS2 vorhanden, wurden jedoch aus CSS2.1 entfernt, da keine breite Unterstützung vorhanden ist.

Standardwert: inline
Vererbung
默认值: inline
继承性: no
版本: CSS1
JavaScript 语法: object.style.display="inline"
Eigenschaft:
Nein
Version: CSS1
JavaScript

Syntax:

object.style.display="inline"
描述
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 ),表格前后带有换行符。 inline-table 此元素会作为内联表格来显示(类似 ),表格前后没有换行符。)。)。)。)。)。) table-row-group 此元素会作为一个或多个行的分组来显示(类似 table-header-group 此元素会作为一个或多个行的分组来显示(类似 table-footer-group 此元素会作为一个或多个行的分组来显示(类似 table-row 此元素会作为一个表格行显示(类似 table-column-group 此元素会作为一个或多个列的分组来显示(类似 table-column 此元素会作为一个单元格列显示(类似 table-cell 此元素会作为一个表格单元格显示(类似 和 ) table-caption 此元素会作为一个表格标题显示(类似 ) inherit 规定应该从父元素继承 display 属性的值。
Mögliche Werte
Wert Beschreibung
keine Dieses Element wird nicht angezeigt.
blockieren Dieses Element wird als Element auf Blockebene mit Zeilenumbrüchen vor und nach diesem Element angezeigt.
inline Standard. Dieses Element wird als Inline-Element ohne Zeilenumbrüche vor und nach dem Element angezeigt.
inline-block Inline-Blockelement. (CSS2.1 Neuer Wert von )
list-item Dieses Element wird als Liste angezeigt.
Einlauf Dieses Element wird je nach Kontext als Element auf Blockebene oder als Inline-Element angezeigt.
kompakt Es gibt einen Wert „compact“ in CSS, der jedoch mangels umfassender Unterstützung aus CSS2.1 entfernt wurdeLöschen.
Marker Wertmarkierungen waren in CSS vorhanden, wurden jedoch aus CSS2.1 entfernt, da keine breite Unterstützung vorhanden war.
Tabelle Dieses Element wird als Tabelle (ähnlich) auf Blockebene angezeigt, mit dem Newline-Zeichen. Inline-Tabelle Dieses Element wird als Inline-Tabelle (ähnlich wie ) ohne Zeilenumbrüche vor oder nach der Tabelle angezeigt. ). ). ). ). ). ) Tabellenzeilengruppe Dieses Element wird als Gruppe aus einer oder mehreren Zeilen angezeigt (ähnlich wie table-header-group Dieses Element wird als Gruppierung einer oder mehrerer Zeilen angezeigt (etwa Tabellenfußgruppe Dieses Element wird als Gruppierung einer oder mehrerer Zeilen angezeigt (etwa Tabellenzeile Dieses Element wird als Tabellenzeile angezeigt (ähnlich wie Tabellenspaltengruppe Dieses Element wird als Gruppierung einer oder mehrerer Spalten angezeigt (etwa Tabellenspalte Dieses Element wird als Zellspalte angezeigt (ähnlich wie Tischzelle Dieses Element wird als Tabellenzelle angezeigt (ähnlich wie Und ) Tabellenüberschrift Dieses Element wird als Tabellentitel angezeigt (ähnlich wie ) erben Gibt an, dass der Wert des Anzeigeattributs vom übergeordneten Element geerbt werden soll.

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das Anzeigeattribut in CSS. 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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

So verwenden Sie Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

So schreiben Sie geteilte Zeilen auf Bootstrap So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

So ändern Sie Bootstrap So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So fügen Sie Bilder auf Bootstrap ein So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So sehen Sie das Datum der Bootstrap So sehen Sie das Datum der Bootstrap Apr 07, 2025 pm 03:03 PM

ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.

So verwenden Sie die Bootstrap -Taste So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

See all articles