Cheat sheetCSS
CSS
Box model, cascade, units, and layout primitives you will actually use in interviews and production.
Box model
css
*, *::before, *::after { box-sizing: border-box; }
/* content-box: width = content only
border-box: width = content + padding + border */
.box {
width: 200px;
padding: 16px;
border: 2px solid;
margin: 8px; /* outside the box */
}Common units
| px | Absolute pixels |
|---|---|
| rem | Relative to root font-size (prefer for type/spacing) |
| em | Relative to element font-size |
| % | Relative to containing block |
| vh/vw | Viewport height/width |
| dvh | Dynamic viewport (mobile browser chrome) |
| ch | Width of “0” glyph — good for measure |
Display & position
css
.inline { display: inline; }
.block { display: block; }
.ib { display: inline-block; }
.none { display: none; } /* removed from layout */
.hidden { visibility: hidden; } /* space reserved */
.rel { position: relative; }
.abs { position: absolute; } /* relative to positioned ancestor */
.fix { position: fixed; } /* relative to viewport */
.sticky { position: sticky; top: 0; }Specificity (high → low)
- ·Inline style (1,0,0,0)
- ·IDs (0,1,0,0)
- ·Classes, attributes, pseudo-classes (0,0,1,0)
- ·Elements, pseudo-elements (0,0,0,1)
- ·!important breaks the model — avoid; prefer architecture
Useful modern bits
css
:root { --space: 1rem; --brand: #0f6e56; }
.gap { padding: var(--space); color: var(--brand); }
.clamp { font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem); }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack > * + * { margin-top: 1rem; }Interview tips
- ✓Draw the box model when explaining layout bugs.
- ✓Say when you’d pick flex vs grid (1D vs 2D).
- ✓Mention stacking contexts when discussing z-index issues.
- ✓Prefer rem for typography; explain why.
Common mistakes
- !Using height: 100% without a defined parent height.
- !Fighting specificity with !important instead of fixing selectors.
- !Assuming margin: auto centers vertically (it doesn’t in block layout).
- !Forgetting border-box and wondering why width “overflows”.