Vibulary
Menü
Aussehen und Sprache
Begriffe nach Thema · 51 Leitfäden

Layout & CSS

Lernen Sie, wie Inhalte auf jedem Bildschirm Größe, Platzierung, Abstände, Ebenen und Form erhalten.

01 / Atlas

Alle Begriffe aus Layout & CSS

Einen Begriff öffnen für eine einfache Bedeutung, ein Beispiel, wann er verwendet wird, wie offiziell er ist und seinen Codenamen.

  1. 01 · Kern

    Abstand Gap

    Abstand ist der Raum, den ein Container zwischen seinen Flexbox- oder Grid-Kindern platziert. Dieselbe Regel gilt für jedes Paar.

  2. 02 · Kern

    Abstände Spacing

    Abstand ist leerer Raum, der absichtlich platziert wird. Er gruppiert verwandte Elemente, trennt Ideen und gibt einer Seite Rhythmus.

  3. 03 · Kern

    App-Shell App Shell

    Ein App-Shell ist der kleine Rahmen, der bleibt, während sich der Seiteninhalt ändert. Er enthält normalerweise Navigation, Identität und Status.

  4. 04 · Kern

    Auffüllung Padding

    Padding ist der Raum innerhalb des Rahmens eines Elements, zwischen seinem Inhalt und seinem Rand.

  5. 05 · Mehr Details

    Backdrop Blur Backdrop Blur

    Backdrop Blur weicht ab, was hinter einer klaren Fläche liegt. Es verwischt nicht den eigenen Inhalt der Fläche.

  6. 06 · Mehr Details

    Bento Grid Bento Grid

    Ein Bento-Grid packt Kacheln unterschiedlicher Größe in ein Layout. Größere Bereiche zeigen, welcher Inhalt am wichtigsten ist.

  7. 07 · Mehr Details

    Block-Formatierungskontext Block Formatting Context

    Ein Block-Formatierungskontext, oder BFC, ist ein separater Bereich für die Blockanordnung. Er hält Float-Elemente im Inneren und verhindert, dass einige Ränder und Floats den Inhalt außerhalb beeinflussen.

  8. 08 · Kern

    Box-Modell Box Model

    Das CSS-Box-Modell erklärt die Größe eines Elements. Jede Box hat Inhalt, Auffüllung (Padding), einen Rahmen (Border) und einen Außenabstand (Margin).

  10. 10 · Kern

    clamp() clamp()

    `clamp()` wählt einen bevorzugten CSS-Wert, hält ihn aber zwischen einem Minimum und einem Maximum.

  11. 11 · Mehr Details

    Container Query Container Query

    Eine Container-Query lässt CSS eine Komponente an ihren eigenen Container anpassen. Sie prüft die Größe oder den Style dieses Containers statt nur des Fensters.

  12. 12 · Mehr Details

    CSS Custom Property CSS Custom Property

    Eine CSS Custom Property ist ein wiederverwendbarer CSS-Wert, oft CSS-Variable genannt. Sie folgt der Kaskade und kann sich je nach Scope oder Theme ändern.

  13. 13 · Kern

    CSS Grid CSS Grid

    CSS Grid ist ein Layout-System für Reihen und Spalten zusammen. Es kann feste Bereiche setzen oder diese anpassen, wenn sich der Platz ändert.

  14. 14 · Kern

    CSS logische Eigenschaften CSS Logical Properties

    CSS-Logikeigenschaften beschreiben Seiten anhand des Schreibflusses, wie Block und Inline. Sie ersetzen feste Richtungen wie oben, rechts, unten und links. Dies hilft Layouts, der Schreibrichtung der Sprache zu folgen.

  15. 15 · Kern

    CSS Selektor CSS Selector

    Ein CSS-Selektor ist ein Muster, das Elemente auf einer Seite findet, sodass ihnen Styles zugewiesen werden können.

  16. 16 · Kern

    CSS Spezifität CSS Specificity

    CSS-Spezifität ist das Gewicht eines Selektors. Wenn andere Kaskadenregeln gleichauf liegen, verwendet der Browser dieses Gewicht, um zu entscheiden, welcher Stil gewinnt.

  18. 18 · Kern

    CSS-Kaskade CSS Cascade

    Die CSS-Kaskade ist die Menge der Regeln, die ein Browser verwendet, wenn mehrere Stile dasselbe Ziel haben. Sie prüft, woher jede Regel stammt, ihre Wichtigkeit, den Kontext, die Ebene, das Selektorgewicht, den Geltungsbereich und die Reihenfolge.

  19. 19 · Kern

    CSS-Positionierung CSS Positioning

    CSS-Positionierung bestimmt, woran ein Element ausgerichtet wird. Als Referenz dient der normale Textfluss, das Element selbst, ein Vorfahre oder der sichtbare Bereich.

  20. 20 · Kern

    CSS-Vererbung CSS Inheritance

    CSS-Vererbung ermöglicht es, dass einige Eigenschaften einen Wert von einem übergeordneten Element übernehmen. Dies passiert, wenn das untergeordnete Element keinen eigenen Wert hat.

  21. 21 · Mehr Details

    CSS-Verschachtelung CSS Nesting

    CSS-Verschachtelung ist eine eingebaute Syntax, um eine Stilregel innerhalb einer anderen zu schreiben. Der Browser befolgt weiterhin die CSS-Regeln für das Lesen von Selektoren und deren Gewicht.

  25. 25 · Kern

    Flexbox Flexbox

    Flexbox ist ein CSS-Layoutsystem, das jeweils eine Richtung bearbeitet. Es richtet Elemente in einer Reihe oder Spalte aus und verteilt sie.

  28. 28 · Kern

    Karten-Raster Card Grid

    Ein Karten-Raster wiederholt Karten, die man vergleichen kann. Die Anzahl der Spalten ändert sich mit dem freien Platz.

  29. 29 · Mehr Details

    Kaskadenschichten Cascade Layers

    Kaskadenschichten sind benannte Gruppen, die die Reihenfolge der CSS-Regeln festlegen. Der Browser überprüft diese Reihenfolge, bevor er die Spezifität der Selektoren vergleicht.

  30. 30 · Kern

    Klebende Position Sticky Position

    CSS sticky Positionierung beginnt wie normale relative Positionierung. Wenn die Seite gescrollt wird, kann die Box an einer festgelegten Kante bleiben, jedoch nur innerhalb ihres enthaltenden Blocks.

  31. 31 · Mehr Details

    Mauerwerk-Layout Masonry Layout

    Ein Masonry-Layout packt Dinge unterschiedlicher Höhe in Spalten. Sie füllen vertikale Lücken, ohne sich Zeilen zu teilen.

  32. 32 · Mehr Details

    max-Inhalt max-content

    `max-content` ist die Größe, die der Inhalt haben möchte, wenn er an normalen Umbruchstellen nicht umbrechen würde.

  33. 33 · Mehr Details

    min-Inhalt min-content

    `min-content` ist die kleinste Größe, die der Inhalt nach dem Umbrechen an allen erlaubten Umbruchstellen haben kann.

  34. 34 · Kern

    minmax() minmax()

    `minmax()` ist eine CSS-Grid-Funktion, die einer Zeile oder Spalte sowohl eine minimale als auch eine maximale Größe gibt.

  35. 35 · Kern

    object-fit object-fit

    `object-fit` steuert, wie ein Bild, Video oder ähnliches Element innerhalb seines Containers passt.

  36. 36 · Kern

    Opazität Opacity

    Die Deckkraft gibt an, wie solide ein Element und seine Kinder erscheinen. Sie kann von durchsichtig bis solide reichen.

  37. 37 · Mehr Details

    Overscroll-Verhalten overscroll-behavior

    `overscroll-behavior` steuert, was passiert, wenn ein scrollbarer Bereich seinen Rand erreicht. Es kann verhindern, dass der Scroll in einen übergeordneten Bereich fortgesetzt wird, und kann den Randeffekt ändern.

  38. 38 · Kern

    Position korrigiert Fixed Position

    CSS-Fixed-Positionierung platziert eine Box relativ zu einem festen Container, normalerweise dem Browserfenster. Die Box bleibt normalerweise an ihrem Platz, während das Dokument gescrollt wird.

  39. 39 · Kern

    Pseudo-Element Pseudo-element

    Ein Pseudo-Element ermöglicht es CSS, einen Teil oder Block zu gestalten, der im Quell-HTML kein normales Element hat. Beispiele sind der erste Buchstabe und generierte Dekoration.

  40. 40 · Kern

    Pseudo-Klasse Pseudo-class

    Eine Pseudo-Klasse ist Teil eines CSS-Selectors. Sie findet ein Element anhand einer Bedingung, wie Zustand, Ort, Sprache oder Benutzeraktion.

  41. 41 · Kern

    Rand Margin

    Rand ist der Raum außerhalb des Rahmens eines Elements. Er hält dieses Element von nahegelegenen Layout-Elementen fern.

  42. 42 · Mehr Details

    Scroll-Snap Scroll Snap

    CSS Scroll Snap ermöglicht es einem Scrollbereich, nach dem Scrollen an gewählten Ausrichtungsstellen zu stoppen.

  45. 45 · Mehr Details

    Stacking-Kontext Stacking Context

    Ein Stacking-Kontext ist eine lokale Gruppe von CSS-Ebenen. Elemente werden zuerst innerhalb der Gruppe geordnet, dann wird die gesamte Gruppe unter anderen Gruppen platziert.

  46. 46 · Mehr Details

    Subgrid Subgrid

    Ein Subgrid ist ein Raster innerhalb eines anderen Rasters, das die Zeilen- oder Spaltengrößen des übergeordneten Elements teilt. Es kann eine Richtung oder beide teilen.

  47. 47 · Kern

    Textkürzung Text Truncation

    Textkürzung schneidet Text ab, um Platz zu sparen. Ein Auslassungszeichen zeigt, dass eine oder mehrere Zeilen fehlen.

  48. 48 · Kern

    Überlauf Overflow

    Überlauf tritt auf, wenn der Inhalt größer als seine Box ist. CSS kann ihn anzeigen, abschneiden oder scrollbar machen.

  49. 49 · Kern

    Viewport-Einheiten Viewport Units

    Viewport-Einheiten sind CSS-Längen, die auf dem sichtbaren Bereich des Browsers basieren. Kleine, große und dynamische Versionen berücksichtigen Browserleisten, die eingeblendet oder ausgeblendet werden.

  50. 50 · Kern

    z-Index z-index

    Der z-Index ist eine CSS-Eigenschaft, die die Vorder-zu-Rück-Ebene eines positionierten Elements festlegt. In einigen Fällen erstellt er auch einen neuen lokalen Stapelkontext.