🎨

CSS: Box-Modell, Selektoren & Media Queries

129 cards · 🇺🇸 English → 🇩🇪 Deutsch

Das CSS-Box-Modell, Selektortypen, Media Queries und Animationen.

Study all 129 cards for free

Flashcards, quizzes, pixel-art games and a daily review that remembers for you.

Study this deck free

Try the first 10 cards

1 / 10
Question

CSS

Knew itLearning

Tap the card for the answer · swipe right if you knew it, left if not

Already have an account? Sign in

Cards

  1. 1CSS
    Cascading Style Sheets
  2. 2CSS box model
    Das Layout-Modell, das jedes Element als rechteckigen Kasten aus Inhalt, Innenabstand (Padding), Rahmen (Border) und Außenabstand (Margin) beschreibt
  3. 3Four parts of the CSS box model (from inside out)
    Inhalt, Innenabstand (Padding), Rahmen (Border), Außenabstand (Margin)
  4. 4Default value of box-sizing
    content-box
  5. 5Box-sizing: border-box
    Sorgt dafür, dass width und height Padding und Border einschließen, nicht nur den Inhalt
  6. 6Margin collapse
    Wenn sich die vertikalen Außenabstände benachbarter Block-Elemente zu einem einzigen Abstand vereinen (der größere der beiden)
  7. 7Shorthand order for margin/padding
    Oben, rechts, unten, links (im Uhrzeigersinn ab oben)
  8. 8Display: block
    Lässt ein Element die gesamte verfügbare Breite einnehmen und beginnt eine neue Zeile
  9. 9Display: inline
    Lässt ein Element in derselben Zeile bleiben und nur so viel Breite einnehmen wie nötig
  10. 10Display: inline-block
    Kombiniert Eigenschaften beider Typen: bleibt inline, erlaubt aber das Festlegen von Breite/Höhe
  11. 11Display: none
    Entfernt das Element vollständig aus dem Dokumentfluss (kein reservierter Platz)
  12. 12Visibility: hidden
    Versteckt das Element, reserviert aber weiterhin seinen Platz im Layout
  13. 13Default position value
    static
  14. 14Position: relative
    Positioniert das Element relativ zu seiner normalen Position; bleibt im Dokumentfluss
  15. 15Position: absolute
    Positioniert das Element relativ zum nächsten positionierten Vorfahren; wird aus dem Dokumentfluss entfernt
  16. 16Position: fixed
    Positioniert das Element relativ zum Viewport; bleibt beim Scrollen an Ort und Stelle
  17. 17Position: sticky
    Wechselt je nach Scroll-Position zwischen relative und fixed
  18. 18Z-index
    Eine Eigenschaft, die die Stapelreihenfolge sich überlappender positionierter Elemente steuert
  19. 19Default display value for div
    block
  20. 20Default display value for span
    inline
  21. 21Display: flex
    Aktiviert das Flexbox-Layout auf einem Element und macht es zu einem Flex-Container
  22. 22Flex-direction
    Die Richtung der Hauptachse: row (Standard), column, row-reverse oder column-reverse
  23. 23Justify-content
    Richtet Items entlang der Hauptachse aus (z. B. flex-start, center, space-between)
  24. 24Align-items
    Richtet Items entlang der Querachse aus (z. B. flex-start, center, stretch)
  25. 25Flex-wrap
    Steuert, ob Flex-Items auf mehrere Zeilen umbrechen: nowrap (Standard), wrap, wrap-reverse
  26. 26Flex: 1
    Kurzform für flex-grow: 1, flex-shrink: 1, flex-basis: 0%
  27. 27Display: grid
    Aktiviert das CSS-Grid-Layout auf einem Element und macht es zu einem Grid-Container
  28. 28Grid-template-columns
    Die Anzahl und Größe der Spalten in einem Grid
  29. 29Grid-template-rows
    Die Anzahl und Größe der Zeilen in einem Grid
  30. 30Fr unit in CSS Grid
    Eine fraktionale Einheit, die einen Anteil des verfügbaren Platzes darstellt

And 99 more cards. Study the whole deck free

Articles about this deck

More Programming decks

See all
Study all 129 cards free