80%
CSS Box model, specificity, Flexbox, Grid, responsive design0/25 questions known
1. Cascade and specificity
DefinitionCSS styles HTML.
p: (0, 0, 1)
.card p: (0, 1, 1)
#main .card p: (1, 1, 1)
style="…" inline: beats all selectors
a = IDs, b = classes / attributes / pseudo-classes, c = elements / pseudo-elements.
Some properties inherit (color, font); most don't (margin, border).
2. Box model
FlowFrom the inside outcontent→padding→border→margin
content-box (default): width = content only, so padding and border add to it.
Vertical margins between blocks collapse (the larger one wins); flex and grid items don't collapse.
display: none removes the element; visibility: hidden keeps its space; opacity: 0 keeps space and stays clickable.
3. Positioning and stacking
static: — · yes (default)
relative: its own normal position · yes (space kept)
absolute: nearest positioned ancestor · no
fixed: the viewport · no
Tipz-index only works on positioned (or flex/grid) elements, and only competes inside the same stacking context (created by position + z-index, opacity…
4. Flexbox (1-D layout)
flex-direction: row (default) or column — sets the main axis
justify-content: alignment along the main axis
align-items: alignment along the cross axis
flex-wrap: allow items to wrap to new lines
5. Grid (2-D layout)
Use Flexbox for a row or column of items; use Grid for rows *and* columns (page layouts, galleries).
fr = a fraction of the free space; minmax(min, max) sets size limits.
grid-template-areas names regions ("header header" / "sidebar main").
6. Responsive design and units
Mobile-first: base styles for small screens, then @media (min-width: 768px) { … } for bigger ones.
rem = relative to the root font size (good for spacing and type); em = relative to the parent font size.
% relative to the parent; vw/vh relative to the viewport; dvh handles mobile browser bars.
clamp(1rem, 2.5vw, 2rem) = fluid size with a min and max.
Common mistakeFixed pixel widths on containers cause horizontal scrolling on phones.
7. Variables, animation and performance
Animate transform and opacity — they skip layout and paint (GPU-friendly).
Animating width, top or margin triggers reflow on every frame.
Respect @media (prefers-reduced-motion: reduce).
Pseudo-classes target state (:hover, :focus-visible, :nth-child); pseudo-elements add parts (::before, ::after).
ReviseSpecificity (IDs > classes > elements), border-box, Flexbox for 1-D and Grid for 2-D, mobile-first with rem and clamp, animate transform/opacity.
Most asked (8)
QExplain the CSS box model.Every element is a rectangular box made of four layers, from the inside out: - content: the text or image itself - padding: space inside…
QWhat does box-sizing: border-box do, and why do most resets use it?With border-box, the width and height you set include padding and border.
QHow does CSS specificity work?When several rules target the same element, the one with the highest specificity wins.
QExplain position: static, relative, absolute, fixed and sticky.- static (default): normal flow; top/left and z-index have no effect - relative: stays in the flow, but can be nudged with offsets.
QFlexbox vs Grid: when do you use each?Flexbox is one-dimensional: it lays items out in a row or a column, and sizes them based on their content.
QHow do you center a div horizontally and vertically?The modern answers: - Flexbox on the parent: display: flex; justify-content: center; align-items: center - Grid on the parent: display…
QWhat is the difference between px, em, rem, %, vh and vw?- px: fixed (a CSS pixel, not a device pixel) - em: relative to the current element's font size (for font-size itself, the parent's), so it…
QHow do media queries work, and what is mobile-first?Media queries apply styles only when a condition is true, usually the viewport width: @media (min-width: 768px) { … }.