CSS has a reputation for being unpredictable, but almost every "the browser is doing something weird" moment traces back to a small set of mechanisms: the box model, the cascade and specificity, inheritance, the positioning scheme, and the layout method (normal flow, Flexbox, or Grid). This is a complete reference, not a quick overview — work through it in order, or jump straight to the part you need from the sidebar.