CSS Advanced Practice Flashcards

Which CSS function clamps a value between a minimum and maximum with a preferred middle value?

Answer: clamp()

clamp(min, preferred, max) returns the preferred value bounded by the min and max.

In CSS Grid, what does the 'fr' unit represent?

Answer: A fraction of the remaining free space

The fr unit distributes a fraction of the leftover space in the grid container.

Which property creates a new stacking context most reliably with a value other than 'auto'?

Answer: z-index on a positioned element

A non-auto z-index on a positioned element establishes a new stacking context.

What does the CSS 'contain: layout' property primarily do?

Answer: Isolates an element's internal layout from the rest of the page

contain: layout tells the browser the element's internal layout won't affect outside elements, improving performance.

Which pseudo-class selects an element only when it is the sole child of its parent?

Answer: :only-child

:only-child matches an element that has no siblings.

In a flex container, what does 'align-content' control when there are multiple lines?

Answer: Distribution of flex lines along the cross axis

align-content distributes wrapped flex lines along the cross axis and only applies when content wraps.

Which value of 'background-attachment' fixes the background relative to the viewport?

Answer: fixed

background-attachment: fixed keeps the background stationary relative to the viewport during scrolling.