Загрузка...

Calc и математические функции CSS

Custom properties дали имена значениям. Математические функции считают при отрисовке: вычесть sidebar из 100%, ограничить min(), плавно масштабировать шрифт через clamp() — без Sass-сборки.

`calc()` — арифметика в значении свойства

Выражение в calc(...). Для + и − нужны пробелы вокруг оператора:

Main column beside a fixed sidebar

css

:root {
--sidebar-w: 16rem;
--gap: 1rem;
}

.layout {
display: flex;
gap: var(--gap);
}

.sidebar {
flex: 0 0 var(--sidebar-w);
}

.main {
flex: 1 1 auto;
min-width: 0;
/* readable fallback when flex alone is not enough */
max-width: calc(100% - var(--sidebar-w) - var(--gap));
}

Можно смешивать %, rem, px, vw и var(), если результат допустим.

Пробелы и единицы

Неверно: calc(100%-2rem). Верно: calc(100% - 2rem). В * один множитель — число.

Padding from a spacing token

css

.card {
--space: 0.75rem;
padding: var(--space) calc(var(--space) * 2);
margin-block: calc(var(--space) / 2);
}

`min()` и `max()`

min() — наименьшее; max() — наибольшее:

Column that never overflows the viewport

css

.hero-inner {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}

.feature-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

`clamp()` — fluid с границами

Порядок: min, preferred, max.

Fluid heading between readable bounds

css

:root {
--text-base: clamp(1rem, 0.95rem + 0.35vw, 1.125rem);
--heading-lg: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

body {
font-size: var(--text-base);
}

h1 {
font-size: var(--heading-lg);
line-height: 1.2;
}

Функции вычисляются при расчёте значения — сочетаются с tokens на :root и подчиняются каскаду как любая другая длина.

Какую функцию когда?

📊 Математические функции

Функция	Смысл	Применение
calc()	формула для свойства	вычесть отступы, удвоить token
min()	«не больше…»	потолок ширины
max()	«не меньше…»	минимальный размер
clamp()	min + preferred + max	fluid-типографика

Простой паттерн высоты

Main area at least viewport minus header

css

:root {
--header-h: 4rem;
}

.page {
min-height: max(100vh, calc(100vh - var(--header-h) + 100%));
}

/* simpler pattern most teams use */
.page-simple {
min-height: calc(100vh - var(--header-h));
display: flex;
flex-direction: column;
}

Попробуйте

Две колонки с calc на main.
Замените фиксированный font-size на clamp.
min(100%, 40rem).
Повторяющуюся формулу на :root.
Пробелы в calc(100%-1rem).

Типичные ошибки

calc(100%-2rem) без пробелов
clamp с min > max
max() вместо потолка (min())
calc в имени свойства
деление двух длин

Итог

calc() — пробелы у + / -
min() / max() — экстремум списка
clamp() — fluid с пределами
Вместе с var(--tokens)
Далее: CSS nesting

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык