What are the four box-model layers? What does box-sizing: border-box change, and why is it the default people reach for?
Whether you can predict an element's rendered size and know why border-box tames it.
Every element is a box of four layers, inside out: content, padding, border, margin. With the default box-sizing: content-box, the width/height you set applies to the CONTENT box only — padding and border are ADDED on top, so a 200px + 20px padding + 2px border element actually occupies 244px. That makes 'width: 100%' plus any padding overflow its container. box-sizing: border-box makes width/height include padding and border, so the box stays the size you asked for and padding eats into the content instead. That predictability is why nearly every reset does `* { box-sizing: border-box }`. Margin is always outside the box and never counts toward width. One more gotcha: vertical margins between block siblings COLLAPSE — the larger of two adjacent margins wins rather than summing; padding and border never collapse.
Sizing bugs where 'width: 100%' overflows: switch to border-box. Reset it globally at the top of every stylesheet.