Home-theater-designers
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.
MAKEUSEOF VIDEO DES TAGES
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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</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.
Website-Elemente mit CSS-Anzeige ausblenden: keine
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.
4B8553AF011488B693BBC238B69A5F102CFFFFAFFlexboxen 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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="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.
So erstellen Sie einen Screenshot ohne Druckbildschirm
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 ein
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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</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>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</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.