CSS CSS Advanced Practice 2 — Questions and Answers
Question 1: Which CSS function clamps a value between a minimum and maximum with a preferred middle value?
- clamp() (Correct answer)
- minmax()
- fit-content()
- constrain()
Correct answer: clamp()
clamp(min, preferred, max) returns the preferred value bounded by the min and max.
Question 2: In CSS Grid, what does the 'fr' unit represent?
- A fixed pixel fraction
- A fraction of the remaining free space (Correct answer)
- A flexbox row
- A font-relative size
Correct answer: A fraction of the remaining free space
The fr unit distributes a fraction of the leftover space in the grid container.
Question 3: Which property creates a new stacking context most reliably with a value other than 'auto'?
- float
- z-index on a positioned element (Correct answer)
- display: block
- clear
Correct answer: z-index on a positioned element
A non-auto z-index on a positioned element establishes a new stacking context.
Question 4: What does the CSS 'contain: layout' property primarily do?
- Hides overflow
- Isolates an element's internal layout from the rest of the page (Correct answer)
- Centers content
- Forces a fixed width
Correct 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.
Question 5: Which pseudo-class selects an element only when it is the sole child of its parent?
- :first-child
- :only-child (Correct answer)
- :last-child
- :nth-child(1)
Correct answer: :only-child
:only-child matches an element that has no siblings.
Question 6: In a flex container, what does 'align-content' control when there are multiple lines?
- Spacing of individual items on the main axis
- Distribution of flex lines along the cross axis (Correct answer)
- Item order
- Single item alignment
Correct 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.
Question 7: Which value of 'background-attachment' fixes the background relative to the viewport?
- scroll
- local
- fixed (Correct answer)
- inherit
Correct answer: fixed
background-attachment: fixed keeps the background stationary relative to the viewport during scrolling.
CSS CSS Advanced Practice 2
Which CSS function clamps a value between a minimum and maximum with a preferred middle value?