The render tree has elements with styles, but the browser doesn’t yet know where to put them on the screen. Without layout calculation, everything would overlap at position (0,0).
Layout (also called reflow) calculates the exact position (x,y) and size (width, height) of each element in the render tree. It runs the CSS box model algorithm to determine where pixels go.
- Start at root: Begin with
<html>element - Box model: Calculate width, height, padding, border, margin per element
- Flow: Block elements stack vertically, inline elements flow horizontally
- Positioning: Apply
position,float,flexbox,gridrules - Output: Each element gets (x, y, width, height)
Element: <div>
- x: 100px, y: 50px
- width: 500px, height: 200px
- Also called “reflow” when triggered again after initial layout
- Runs the CSS box model algorithm
- Parent elements affect children (containing blocks)
- Expensive operation—avoid forced synchronous layout
- Built from: Render Tree — layout takes render tree as input
- Builds into: Painting — layout output used for painting
- Related: CSS Box Model — defines width/height calculation
- Related: Browser Rendering — layout is step 4
- Reading offsetWidth/Height triggers synchronous layout (slow!)
display: none→display: blocktriggers full reflow- Animations with
top/leftcause continuous reflow (usetransforminstead) - Table layout is especially expensive