🎨

CSS: Box Model, Selectors & Media Queries

129 cards · 🇺🇸 English

The CSS box model, selector types, media queries, and animations.

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
    The layout model describing every element as a rectangular box with content, padding, border, and margin
  3. 3Four parts of the CSS box model (from inside out)
    Content, padding, border, margin
  4. 4Default value of box-sizing
    content-box
  5. 5Box-sizing: border-box
    Makes width and height include padding and border, not just content
  6. 6Margin collapse
    When vertical margins of adjacent block elements combine into a single margin (the larger of the two)
  7. 7Shorthand order for margin/padding
    Top, right, bottom, left (clockwise from top)
  8. 8Display: block
    Makes an element take up the full width available and starts on a new line
  9. 9Display: inline
    Makes an element stay on the same line and only take up as much width as needed
  10. 10Display: inline-block
    Combines features of both: stays inline but allows width/height to be set
  11. 11Display: none
    Removes the element from the document flow entirely (no space reserved)
  12. 12Visibility: hidden
    Hides the element but still reserves its space in the layout
  13. 13Default position value
    static
  14. 14Position: relative
    Positions the element relative to its normal position; still in document flow
  15. 15Position: absolute
    Positions the element relative to its nearest positioned ancestor; removed from document flow
  16. 16Position: fixed
    Positions the element relative to the viewport; stays in place when scrolling
  17. 17Position: sticky
    Switches between relative and fixed depending on scroll position
  18. 18Z-index
    A property that controls the stacking order of overlapping positioned elements
  19. 19Default display value for div
    block
  20. 20Default display value for span
    inline
  21. 21Display: flex
    Enables Flexbox layout on an element, making it a flex container
  22. 22Flex-direction
    The main axis direction: row (default), column, row-reverse, or column-reverse
  23. 23Justify-content
    Aligns items along the main axis (e.g., flex-start, center, space-between)
  24. 24Align-items
    Aligns items along the cross axis (e.g., flex-start, center, stretch)
  25. 25Flex-wrap
    Controls whether flex items wrap to multiple lines: nowrap (default), wrap, wrap-reverse
  26. 26Flex: 1
    Shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%
  27. 27Display: grid
    Enables CSS Grid layout on an element, making it a grid container
  28. 28Grid-template-columns
    The number and size of columns in a grid
  29. 29Grid-template-rows
    The number and size of rows in a grid
  30. 30Fr unit in CSS Grid
    A fractional unit representing a fraction of the available space

And 99 more cards. Study the whole deck free

Articles about this deck

More Programming decks

See all
Study all 129 cards free