CSS calc() & Functions

CSS calc() & Functions — Use CSS math functions: calc(), min(), max(), clamp(), and trigonometric functions for flexible sizing. The guide walks through calc() Basics, min(), max(), clamp(), Interactive Pseudo-Classes, Structural Pseudo-Classes, Common Pseudo-Elements. `calc(100% - 200px)` — mixed unit calculations. `calc(50% + 20px)` — percentage + fixed. Support: +, -, *, /. Spaces required around operators. Use for: full-width minus sidebar, centered elements, responsive font sizes, subtracting fixed-height headers from viewport height. `min(100%, 800px)` — never wider than 800px. `max(300px, 50%)` — at least 300px. `clamp(300px, 50%, 800px)` — minimum, preferred, maximum. Fluid typography: `clamp(1rem, 2.5vw, 2rem)` — responsive font that scales between min and max. Provides responsive sizing without media queries. The guide is organized into 5 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is. Related guides: CSS Introduction, CSS Selectors, CSS Box Model, CSS Flexbox, CSS Grid.