Die CSS-Anzeigeeigenschaft ist ein leistungsstarkes Werkzeug für Webdesigner. Damit können Sie Layouts von Website-Elementen mit minimalem Styling steuern, mit einfachen Werten, die Sie sich leicht merken können.
Aber was macht jeder dieser Werte und wie funktionieren sie? Lass es uns herausfinden.
Was ist die CSS-Anzeigeeigenschaft?
Die Display-Eigenschaft gibt den Typ der Box-Wiedergabe an, die für HTML-Elemente auf einer Webseite verwendet wird. Dies führt zu einer Vielzahl von Verhaltensweisen, einschließlich des Nichterscheinens. Sie können diese Werte auf Ihrer Website über das Stylesheet oder die entsprechenden CSS-Anpassungsabschnitte in bearbeiten CMS-Tools wie WordPress.
Elemente in Einklang mit CSS-Anzeige halten: inline
Breiten- und Höhenwerte gelten nicht für ein Element mit Inline-Anzeige; Der Inhalt im Inneren legt seine Dimensionen fest. Inline-HTML-Elemente können Seite an Seite mit anderen Elementen stehen und sich wie a verhalten. Inline anzeigen wird am häufigsten für Text verwendet.
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Metazeichensatz="utf-8">
<Titel>CSS-Anzeigewerte</title>
<Stil>
.in der Reihe {
Anzeige: Inline;
Schriftgröße: 3rem;
}
#inline-1 {
Hintergrundfarbe: gelb;
Polsterung: 10px 0px 10px 10px;
}
#inline-2 {
Hintergrundfarbe: hellgrün;
Polsterung: 10px 10px 10px 0px;
}
</style>
</head>
<Karosserie>
<h1>CSS-Anzeige Inline</h1>
<div-Klasse="in der Reihe" id="Inline-1">Das ist Text</div>
<div-Klasse="in der Reihe" id="Inline-2">mit dem Inline-Eigenschaftswert.</div>
</body>
</html>
Dieses HTML-Markup und CSS oben dienen als gutes Beispiel für den Display-Inline-Wert. Bei gemeinsamer Verwendung wird eine einzelne Textzeile angezeigt, die aus zwei verschiedenen HTML-Elementen besteht.
Steuern Sie Website-Layouts mit CSS-Anzeige: Block
In gewisser Weise ist der Wert des Anzeigeblocks das Gegenteil des Inline-Werts. Höhen- und Breitenmaße können eingestellt werden, und Elemente mit diesem Wert können nicht nebeneinander sitzen. Das obige Beispiel zeigt zwei Elemente mit dem Blockwert. Elemente mit dem Anzeigewert Block haben standardmäßig die maximale Breite ihres übergeordneten Elements.
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Metazeichensatz="utf-8">
<Titel>CSS-Anzeigewerte</title>
<Stil>
.Block {
Bildschirmsperre;
Schriftgröße: 3rem;
Breite: fit-Inhalt;
}
#Block 1 {
Hintergrundfarbe: gelb;
Polsterung: 10px 10px 10px 10px;
}
#block-2 {
Hintergrundfarbe: hellgrün;
Polsterung: 10px 10px 10px 10px;
}
</style>
</head>
<Karosserie>
<h1>CSS-Anzeigeblock</h1>
<div-Klasse="Block" id="Block 1">Das ist Text</div>
<div-Klasse="Block" id="Block-2">mit dem Blockeigenschaftswert.</div>
</body>
</html>Im Gegensatz zum Beispiel für den Inline-Stil werden in diesem Beispiel für Anzeigeblockwerte die Textzeilen in zwei verschiedene Zeilen aufgeteilt. Der Wert fit-content width legt die Breite der Elemente so fest, dass sie der Länge des Textes entspricht.
Side-by-Side-HTML-Elemente mit CSS-Anzeige: Inline-Block
Der CSS-Anzeige-Inline-Blockwert funktioniert genauso wie ein normaler Inline-Wert, nur mit der Möglichkeit, bestimmte Dimensionen hinzuzufügen. Dadurch ist es möglich, rasterartige Layouts zu erstellen, ohne dass übergeordnete Elemente vorhanden sind. Um auf das vorherige Beispiel zurückzukommen, ermöglicht das Hinzufügen des Inline-Block-Werts, dass die Elemente nebeneinander sitzen.
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Metazeichensatz="utf-8">
<Titel>CSS-Anzeigewerte</title>
<Stil>
.inline-block {
Anzeige: Inline-Block;
Schriftgröße: 3rem;
Breite: fit-Inhalt;
}
#inline-block-1 {
Hintergrundfarbe: gelb;
Polsterung: 10px 10px 10px 10px;
}
#inline-block-2 {
Hintergrundfarbe: hellgrün;
Polsterung: 10px 10px 10px 10px;
}
</style>
</head>
<Karosserie>
<h1>CSS Display Inline-Block (Breite eingestellt)</h1>
<div-Klasse="Inline-Block" id="Inline-Block-1">Das ist Text</div>
<div-Klasse="Inline-Block" id="Inline-Block-2">mit der Inline-Block-Eigenschaft
Wert.</div>
</body>
</html>
Der Inline-Block-Wert unterscheidet sich nicht wesentlich vom Inline-Wert. Es ist jedoch wichtig zu beachten, dass Sie mit diesem Wert die Abmessungen von Elementen festlegen können, was die Arbeit in bestimmten Fällen erleichtert.
Der einfachste Anzeigewert ist „none“. Dieser Wert verbirgt das Element und alle untergeordneten Elemente zusammen mit Rändern und anderen Abstandseigenschaften. Elemente mit dem Wert CSS display none sind in Browser-Inspektoren weiterhin sichtbar.
Erstellen Sie flexible und ansprechende Elemente mit CSS display: flex
Display Flex ist einer der neuesten CSS-Layout-Modi. Wenn sich Display Flex auf einem übergeordneten Element befindet, werden alle darin enthaltenen Elemente zu flexiblen CSS-Elementen. Das übergeordnete Element in dieser Konfiguration ist eine Flexbox.
Flexboxen erstellen ansprechende Designs mit vordefinierten Variablen wie Breite und Höhe. Es lohnt sich Erlernen von HTML/CSS-Flexboxen bevor Sie anfangen.
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Metazeichensatz="utf-8">
<Titel>CSS-Anzeigewerte</title>
<Stil>
.biegen {
Anzeige: Flex;
Schriftgröße: 3rem;
}
#flex-1 {
Hintergrundfarbe: gelb;
Breite: 40 %;
Höhe: 100px;
}
#flex-2 {
Hintergrundfarbe: hellgrün;
Breite: 25 %;
Höhe: 100px;
}
#flex-3 {
Hintergrundfarbe: hellblau;
Breite: 35 %;
Höhe: 100px;
}
</style>
</head>
<Karosserie>
<h1>CSS-Display-Flex</h1>
<div-Klasse="biegen">
<div-id="Flex-1"></div>
<div-id="Flex-2"></div>
<div-id="Flex-3"></div>
</div>
</body>
</html>Flexboxen nebeneinander positionieren Mit Display: inline-flex
Inline-Flex verhält sich wie eine normale Flexbox, mit dem zusätzlichen Vorteil, dass das Element neben anderen Elementen sitzen kann.
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Metazeichensatz="utf-8">
<Titel>CSS-Anzeigewerte</title>
<Stil>
.inline-flex {
Anzeige: Inline-Flex;
Schriftgröße: 3rem;
Breite: 49.8%;
}
#inline-flex-1 {
Hintergrundfarbe: gelb;
Breite: 40 %;
Höhe: 100px;
}
#inline-flex-2 {
Hintergrundfarbe: hellgrün;
Breite: 25 %;
Höhe: 100px;
}
#inline-flex-3 {
Hintergrundfarbe: hellblau;
Breite: 35 %;
Höhe: 100px;
}
</style>
</head>
<Karosserie>
<h1>CSS Display Inline-Flex</h1>
<div-Klasse="inline-flex">
<div-id="inline-flex-1"></div>
<div-id="inline-flex-2"></div>
<div-id="inline-flex-3"></div>
</div>
<div-Klasse="inline-flex">
<div-id="inline-flex-1"></div>
<div-id="inline-flex-2"></div>
<div-id="inline-flex-3"></div>
</div>
</body>
</html>Komplexe Tabellen mit CSS erstellen display: table
Der angezeigte Tabellenwert erinnert an die alten Zeiten des Website-Designs. Während die meisten Websites heute keine Tabellen für ihre Layouts verwenden, sind sie immer noch gültig, um Daten und Inhalte in einem lesbaren Format anzuzeigen.
Wenn Sie einem HTML-Element den Tabellenwert hinzufügen, verhält es sich wie ein Tabellenelement, aber Sie benötigen zusätzliche Werte, damit Ihre Tabelle ordnungsgemäß funktioniert.
CSS-Anzeige: Tabellenzelle
Elemente mit dem Tabellenzellenwert fungieren als einzelne Zellen innerhalb der Haupttabelle. Und die Tabellenspalten- und Tabellenzeilenwerte gruppieren diese einzelnen Zellen zusammen.
CSS-Anzeige: Tabellenzeile
Der Tabellenzeilenwert funktioniert genau wie a
CSS-Anzeige: Tabellenspalte
Der Tabellenspaltenwert funktioniert ähnlich wie der Tabellenzeilenwert, nur dass er Ihre Tabelle nicht aufteilt. Stattdessen können Sie diesen Wert verwenden, um bestimmte CSS-Regeln zu den verschiedenen bereits vorhandenen Spalten hinzuzufügen.
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Metazeichensatz="utf-8">
<Titel>CSS-Anzeigewerte</title>
<Stil>
.Tisch {
Anzeige: Tabelle;
Schriftgröße: 3rem;
}
.Header {
Anzeige: Tabellenkopfgruppe;
Schriftgröße: 3rem;
}
#Spalte-1 {
Anzeige: Tabellenspaltengruppe;
Hintergrundfarbe: gelb;
}
#Spalte-2 {
Anzeige: Tabellenspaltengruppe;
Hintergrundfarbe: hellgrün;
}
#Spalte-3 {
Anzeige: Tabellenspaltengruppe;
Hintergrundfarbe: hellblau;
}
#row-1 {
Anzeige: Tabellenzeile;
}
#row-2 {
Anzeige: Tabellenzeile;
}
#Reihe-3 {
Anzeige: Tabellenzeile;
}
#Zelle {
Anzeige: Tabellenzelle;
Polsterung: 10px;
Breite: 20 %;
}
</style>
</head>
<Karosserie>
<h1>CSS-Anzeigetabelle</h1>
<div-Klasse="Tisch">
<div-id="Spalte-1"></div>
<div-id="Spalte-2"></div>
<div-id="Spalte-3"></div>
<div-Klasse="Header">
<div-id="Zelle">Name</div>
<div-id="Zelle">Das Alter</div>
<div-id="Zelle">Land</div>
</div>
<div-id="Reihe-1">
<div-id="Zelle">Jeff</div>
<div-id="Zelle">21</div>
<div-id="Zelle">Vereinigte Staaten von Amerika</div>
</div>
<div-id="Reihe-2">
<div-id="Zelle">Verklagen</div>
<div-id="Zelle">34</div>
<div-id="Zelle">Spanien</div>
</div>
<div-id="Reihe-3">
<div-id="Zelle">Boris</div>
<div-id="Zelle">57</div>
<div-id="Zelle">Singapur</div>
</div>
</div>
</body>
</html>Erstellen Sie Side-by-Side-Tabellen mit CSS-Anzeige: inline-table
Wie die anderen Inline-Varianten, die wir uns bereits angesehen haben, bietet Inline-Table die Möglichkeit, Tabellenelemente neben anderen Elementen zu platzieren.
Erstellen Sie reaktionsschnelle Website-Layouts mit CSS-Anzeige: Raster
Der Rasterwert der CSS-Anzeige ähnelt dem Tabellenwert, nur die Spalten und Zeilen eines Rasters können eine flexible Größe haben. Dadurch eignen sich Raster ideal zum Erstellen des Hauptlayouts für Webseiten. Sie lassen Platz für Kopf- und Fußzeilen in voller Breite und ermöglichen gleichzeitig Inhaltsbereiche unterschiedlicher Größe.
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<Metazeichensatz="utf-8">
<Titel>CSS-Anzeigewerte</title>
<Stil>
.Netz {
Anzeige: Raster;
Schriftgröße: 3rem;
Grid-Template-Bereiche:
'Kopfzeile Kopfzeile Kopfzeile Kopfzeile'
'Inhalt linke Seitenleiste Inhalt rechte Seitenleiste'
'Fußzeile Fußzeile Fußzeile Fußzeile';
Abstand: 10px;
}
#grid-1 {
Rasterbereich: Kopfzeile;
Hintergrundfarbe: gelb;
Höhe: 100px;
Polsterung: 20px;
Textausrichtung: Mitte;
}
#Gitter 2 {
Rasterbereich: linke Seitenleiste;
Hintergrundfarbe: hellgrün;
Höhe: 200px;
Polsterung: 20px;
Textausrichtung: Mitte;
}
#grid-3 {
Rasterbereich: Inhalt;
Hintergrundfarbe: hellblau;
Höhe: 200px;
Polsterung: 20px;
Textausrichtung: Mitte;
}
#grid-4 {
Grid-Bereich: rechte Seitenleiste;
Hintergrundfarbe: hellgrün;
Höhe: 200px;
Polsterung: 20px;
Textausrichtung: Mitte;
}
#grid-5 {
Rasterbereich: Fußzeile;
Hintergrundfarbe: gelb;
Höhe: 100px;
Polsterung: 20px;
Textausrichtung: Mitte;
}
</style>
</head>
<Karosserie>
<h1>CSS-Anzeigeraster</h1>
<div-Klasse="Netz">
<div-id="Raster-1">Header</div>
<div-id="Gitter 2">Linke Seitenleiste</div>
<div-id="Raster-3">Inhalt</div>
<div-id="Raster-4">rechte Sidebar</div>
<div-id="Raster-5">Fusszeile</div>
</div>
</body>
</html>
Grids ähneln Flexboxen, nur dass sie Elemente untereinander und nebeneinander platzieren können. Die Eigenschaft grid-template-areas ist dafür unerlässlich. Wie Sie dem Code entnehmen können, nehmen unsere Kopf- und Fußzeile vier Leerzeichen im Array ein, da sie die volle Breite haben. Die Seitenleisten nehmen jeweils einen Platz ein, während der Inhalt zwei belegt, wodurch die mittlere Reihe des Rasters effektiv in drei Spalten aufgeteilt wird.
CSS-Anzeige: Inline-Raster
Die Verwendung des Inline-Rasterwerts ermöglicht es Ihrem Raster, neben anderen Elementen zu sitzen, genau wie die anderen Inline-Werte in diesem Handbuch.
Verwenden von CSS Display für Webdesign
Die CSS-Anzeigeeigenschaft bietet eine praktische Möglichkeit, die Struktur von Website-Elementen anzupassen, ohne das HTML-Markup ändern zu müssen. Dies ist ideal für diejenigen, die Content-Delivery-Plattformen wie Shopify oder WordPress verwenden, aber es kann auch für das allgemeine Webdesign nützlich sein.