Layout Flashcards
What does the display property do in CSS?
Determines how an element and its children behave in the layout.
How do inline elements behave?
They sit next to each other in the inline direction, like words in a sentence, and their margin and padding are ignored by surrounding elements.
How do block elements behave?
They create a new line, do not sit alongside each other, expand to the size of the inline dimension, and their margins are respected.
What happens when you set display: flex; on an element?
The element becomes a flex container, and its children become flex items.
What type of layout is Flexbox designed for?
One-dimensional layouts (either row or column).
How do Flexbox children align by default?
They align next to each other in a row and stretch in the block direction to be the same height.
What happens when Flexbox items run out of space?
By default, they do not wrap, but this behavior can be changed.
What type of layout is CSS Grid designed for?
Two-dimensional layouts (both row and column control).
What is the purpose of the repeat() function in CSS Grid?
It allows defining repeating column or row patterns.
What is the fr unit in CSS Grid?
It represents a fraction of the remaining space.
What is the effect of display: inline-block;?
It allows inline elements to respect margin and padding while keeping some block-level characteristics.
What does float do in CSS?
It moves an element to a specified direction (left or right), allowing text and inline elements to wrap around it.
What does the position property control?
What does the position property control?
What is the default position value in CSS?
static
What does position: relative; do?
It makes the element a reference point for absolutely positioned child elements without removing it from the document flow.
What does position: absolute; do?
It removes the element from the document flow and positions it relative to the nearest positioned ancestor.
What does position: fixed; do?
It removes the element from the document flow and positions it relative to the viewport, staying fixed during scrolling.
What does position: sticky; do?
It allows an element to behave like relative positioning until a certain scroll position is reached, after which it stays fixed.
hat properties can be used to position absolutely positioned elements?
top, right, bottom, left.
