CSS — box model, flex, grid, specificity

Frontend rounds love "center this div" and "build this layout from a screenshot." If flex/grid aren't reflexive, you waste interview minutes on layout instead of substance.

How CSS attaches to HTML

Before any of the layout ideas make sense, you need the one-sentence model of how CSS gets applied at all. A CSS rule has two halves: a selector (which elements does this target?) and a declaration block (a set of property: value; pairs to apply). The browser walks the page, matches selectors to elements, and paints the winning values. That is the whole game.

/* selector  { property: value; property: value; } */
p {
  color: steelblue;     /* every <p> turns blue */
  font-size: 16px;
}

A selector says what to style. The four you will use constantly: a type/tag selector (p, button) matches by element name; a class selector (.card, leading dot) matches any element with class="card" and is the workhorse you should reach for first; an id selector (#header, leading hash) matches the one element with that id; and a descendant selector (.card p, space between) matches a p anywhere inside a .card. Classes are reusable across many elements; ids are meant to be unique on the page.

The box model, with the math

Every element is a box drawn in four concentric layers, from the inside out: content (the text or image itself), padding (clear space inside the border, pushing the content away from the edge), border (the visible line around the padding), and margin (clear space outside the border that pushes other boxes away). A simple rule of thumb: padding is space on the inside, margin is space on the outside.

The classic gotcha is how width is measured. With the default box-sizing: content-box, the width you set applies only to the content; padding and border are then added on, so the box renders wider than the number you wrote:

/* default content-box: rendered width = content + padding + border */
.card {
  box-sizing: content-box;   /* the default */
  width: 200px;
  padding: 20px;            /* 20 on each side = +40 */
  border: 2px solid;        /* 2 on each side  = +4  */
}
/* actual painted width = 200 + 40 + 4 = 244px  (surprise!) */

Switch to border-box and width means the whole box edge-to-edge (content + padding + border); the content area simply shrinks to make room. Now width: 200px really is 200px wide. Set it globally once and stop doing arithmetic in your head:

/* set once, near the top of your stylesheet, and forget it */
*, *::before, *::after {
  box-sizing: border-box;
}
.card {
  width: 200px;
  padding: 20px;
  border: 2px solid;
}
/* painted width = exactly 200px; content area = 200 - 40 - 4 = 156px */

Block vs inline

Elements come in two default flavors. A block element (div, p, h1, section) starts on a new line and stretches to fill the full width available — think of paragraphs stacking vertically. An inline element (span, a, strong) flows along inside a line of text and is only as wide as its content — like words in a sentence. Two consequences worth memorizing: inline elements ignore width, height, and top/bottom margins, and that catches people out. When you need an inline-ish thing that also honors box dimensions, use display: inline-block (flows inline, but accepts width/height). And display: none removes the box from the layout entirely (vs visibility: hidden, which hides it but keeps its space reserved).

Flexbox: the single shelf

Flexbox lays children out along one direction. You turn it on with display: flex on the container (the parent); its direct children become flex items. The direction is the main axis (a row by default, left-to-right); the perpendicular direction is the cross axis (top-to-bottom for a row). Two properties do most of the work: justify-content positions items along the main axis, and align-items positions them along the cross axis. Here is the canonical "center a div both ways" — the answer interviewers want first:

.parent {
  display: flex;
  justify-content: center;   /* center on the main axis (horizontal) */
  align-items: center;       /* center on the cross axis (vertical)   */
  min-height: 100vh;          /* give it height so there's room to center in */
}
/* the single child now sits dead-center, both axes */

A few more flex terms you will hear: flex-direction: column rotates the main axis to vertical (now justify-content controls vertical, align-items horizontal — they swap with the axis). gap sets consistent spacing between items and is cleaner than sprinkling margins. flex-wrap: wrap lets items spill onto a new line instead of overflowing. And the shorthand on each item, flex: 1, means "grow to share leftover space equally" — the standard way to make columns split the row evenly.

Grid: the whole bookcase

Grid lays children out in rows and columns at the same time (2D). You declare the column track sizes on the container and items flow into the cells. The handy unit here is fr (a "fraction" of the leftover space), and repeat(n, ...) saves typing:

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 equal columns */
  gap: 16px;                            /* gutter between cells */
}
/* a responsive trick: columns that auto-fit and never get too narrow */
.gallery-fluid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

The interview heuristic: reach for grid when you are placing things in two dimensions (a page skeleton, an image gallery, a card grid), and reach for flex when you are arranging things along one line (a navbar, a row of buttons, a toolbar). They compose freely — a grid cell can itself be a flex container.

Position and z-index

The position property controls how an element is placed and what the top/right/bottom/left offsets mean. The five values:

• static — the default; the element sits in normal document flow and ignores top/left offsets.
• relative — stays in flow, but you can nudge it with offsets relative to where it would have been. Crucially, it also becomes the anchor for absolutely-positioned children.
• absolute — removed from flow and positioned relative to its nearest positioned ancestor (the closest parent that is itself relative/absolute/fixed/sticky). If none exists, it anchors to the page.
• fixed — removed from flow and pinned to the viewport; it stays put when you scroll (think sticky headers, chat bubbles).
• sticky — a hybrid: behaves like relative until you scroll past a threshold, then "sticks" like fixed within its container (section headers that cling to the top).

z-index decides which overlapping box paints on top — higher numbers win. The trap is that z-index only compares siblings within the same stacking context. A stacking context is an isolated layer-stack; an element trapped inside one can never paint above a sibling of its parent, no matter how large its z-index. Stacking contexts are created quietly by position with a z-index, but also by transform, opacity below 1, filter, and a few others. So "my z-index: 9999 still sits behind that thing" almost always means: look up the tree — an ancestor created a context with a lower stacking position, and your child is boxed inside it.

Units: px, em, rem, %

Sizes are written in units, and choosing the right one matters for accessibility and responsiveness:

• px — an absolute pixel. Predictable and fixed; good for borders and fine details, but it does not scale when a user bumps their browser font size.
• rem — "root em": relative to the root font size (the <html> element, usually 16px). 1.5rem = 24px by default. Because it tracks the user's base font setting, rem is the preferred unit for font sizes and spacing in accessible designs.
• em — relative to the current element's font size. Handy for padding that should scale with the text inside a component, but it compounds when nested (an em inside an em multiplies), which surprises people.
• % — relative to the parent's corresponding dimension (e.g. width: 50% = half the parent's width). Also vw/vh exist for 1% of the viewport width/height.

Responsive design and media queries

Responsive means one layout that adapts to any screen width rather than separate desktop/mobile pages. The tool is the media query — a block of CSS that only applies when a condition (usually a width range) is met. The recommended approach is mobile-first: write your base styles for the small screen, then use min-width queries to add complexity as the screen grows. This keeps the simplest case as the default and layers on the rest:

/* base = mobile: one column, full width */
.layout {
  display: grid;
  grid-template-columns: 1fr;
}
/* once there's room, upgrade to two columns */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 1fr; }
}

A breakpoint is just the width at which you change the layout (768px above). Pick breakpoints based on where your content starts to look cramped, not on specific device models. The modern successor, the container query (@container), reacts to the size of a component's own container instead of the whole viewport, which makes truly reusable components — worth naming if asked.

Common pitfalls