So steuern Sie das Ausblenden und Anzeigen in der CSS-Anzeige

Die Display-Eigenschaft von CSS wird verwendet, um den Anzeigemodus von Elementen festzulegen. Sie können damit Aspekte wie die Sichtbarkeit, das Layout und die Größe von Elementen steuern, weshalb es in CSS-Anwendungen sehr häufig vorkommt.

CSS-Anzeigeeinstellungen

In CSS kann die Display-Eigenschaft die folgenden Werte annehmen:

• none
• inline
• block
• inline-block
• table
• table-cell
• table-row
• inline - Tabelle
• flex
• grid

Es ist zu beachten, dass verschiedene Elemente unterschiedliche Anzeigeattribute unterstützen, was die Auswahl des geeigneten Attributwerts basierend auf der tatsächlichen Situation erfordert.

CSS Display none

Verwenden Sie Display:none, um ein Element vollständig auszublenden. Das bedeutet, dass das Element keinen Platz auf der Seite einnimmt und keine Auswirkungen auf andere Elemente hat. Diese Funktion ist sehr nützlich bei der Webentwicklung, bei der HTML-Elemente dynamisch angezeigt oder ausgeblendet werden müssen.

CSS-Anzeige inline

Verwenden Sie Display:inline, um Elemente als Inline-Elemente anzuzeigen, das heißt, sie werden wie normaler Text in derselben Zeile angeordnet. Es ignoriert die Breiten- und Höhenattribute des Elements und zeigt sie nur basierend auf der Größe des Inhalts an.

CSS-Anzeigeblock

Verwenden Sie Display:block, um Elemente als Elemente auf Blockebene anzuzeigen, das heißt, sie belegen eine eigene Zeile auf der Seite. Diese Funktion ist sehr nützlich, da sie uns ein spezifischeres Layout von HTML-Elementen ermöglicht.

CSS Display inline-block

Verwenden Sie Display:inline-block, um Elemente gleichzeitig als Inline-Elemente und Elemente auf Blockebene anzuzeigen, d. h. sie werden in derselben Zeile angeordnet, Attribute wie Größe können jedoch verwendet werden wie Elemente auf Blockebene gesetzt werden.

CSS-Anzeigetabelle

Verwenden Sie Display:table, um Elemente in Form einer Tabelle anzuzeigen. Das bedeutet, dass das Element eine Kopfzeile, einen Hauptteil und eine Fußzeile enthält und mithilfe der zugehörigen Eigenschaften der Tabelle festgelegt werden kann.

CSS Display table-cell

Verwenden Sie Display:table-cell, um ein Element als Tabellenzelle anzuzeigen, d. h. das Element wird zu einer Zelle in der Tabelle. Es kann die Breite und Höhe zwischen Spalten und Zeilen automatisch anpassen und ist daher sehr nützlich.

CSS Display table-row

Verwenden Sie Display:table-row, um ein Element als Tabellenzeile anzuzeigen, d. h. das Element wird zu einer Zeile in der Tabelle. Dies ist auch sehr nützlich, da Sie damit ein spezifischeres Layout der Tabellenzeilen erhalten.

CSS Display inline-table

Verwenden Sie Display:inline-table, um Elemente gleichzeitig als Inline-Elemente und Tabellen anzuzeigen. Dadurch können wir eine Tabelle innerhalb eines Inline-Elements erstellen.

CSS Display Flex

Verwenden Sie Display:flex, um Elemente zu einer flexiblen Box zu machen. Das bedeutet, dass Elemente innerhalb des Containers nach Ihren Wünschen ausgerichtet, angeordnet und hinzugefügt/entfernt werden können.

CSS Display Grid

Verwenden Sie Display:grid, um Elemente in Rastercontainer umzuwandeln. Dies bedeutet, dass Sie die Seite in ein Raster unterteilen und Elemente in unterschiedlichen Größen und Positionen platzieren können, was äußerst nützlich ist.

CSS Display blendet und zeigt Elemente an

Eine wichtige Funktion von CSS Display ist, dass es zum Ausblenden oder Anzeigen von HTML-Elementen verwendet werden kann. Anzeige: Keine wird häufig zum Ausblenden und Anzeigen von Elementen verwendet.

Wenn der folgende Code wirksam wird, wird das Element ausgeblendet:

display: none;

Wenn Sie das Element anzeigen müssen, setzen Sie einfach die Display-Eigenschaft auf den entsprechenden Wert, z. B.:

display: block;

Dadurch wird das Element erneut angezeigt.

Fazit

Die CSS-Display-Eigenschaft ist in der Webentwicklung sehr wichtig und kann zur Steuerung des Layouts, der Sichtbarkeit und der Größe von Elementen verwendet werden, um komplexe Seitendesigns zu erreichen. Das Verständnis der verschiedenen Anzeigewerte und ihrer Anwendungsfälle ist ein wichtiger Schritt beim Erlernen grundlegender CSS-Kenntnisse.

Das obige ist der detaillierte Inhalt vonSo steuern Sie das Ausblenden und Anzeigen in der CSS-Anzeige. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!