What is the difference between em, rem, %, vh and vw in CSS?
em is relative to the parent font size, rem is relative to the root font size, % is relative to the parent鈥檚 relevant size, and vh/vw are 1% of the viewport height or width.
Frontend 路 Intern to senior
CSS interviews check that you can build and debug layouts without guessing: how the box model and specificity work, when to use Flexbox or Grid, and how positioning and units behave.
5 of 9 questions match
Clear filtersem is relative to the parent font size, rem is relative to the root font size, % is relative to the parent鈥檚 relevant size, and vh/vw are 1% of the viewport height or width.
Relative offsets an element from its normal place; absolute positions it against the nearest positioned ancestor; fixed is against the viewport; sticky sits in normal flow until a scroll threshold, then sticks.
Flexbox is one-dimensional (a row or a column). CSS Grid is two-dimensional (rows and columns at once). Use Flexbox for alignment along a line; use Grid when the layout is a real 2D structure.
Specificity is the score the browser uses to decide which rule wins: inline styles beat IDs, IDs beat classes/attributes/pseudo-classes, and those beat elements. When scores tie, the last rule in the source wins.
The browser parses HTML into a DOM and CSS into a CSSOM, combines them into a render tree, computes layout (reflow), paints pixels and composites layers onto the screen.