0Pricing
CSS Academy · Урок

calc() для динамических вычислений

Смешивайте единицы измерения и выполняйте арифметические операции в CSS с помощью функции calc() для получения динамических значений.

«calc() для динамических вычислений» — бесплатный урок CSS Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое calc()?

calc() позволяет выполнять арифметические вычисления непосредственно в значениях свойств CSS. В одном вычислении можно смешивать разные единицы (px, %, rem, vw).

Базовый синтаксис calc()

Поддерживаются сложение (+), вычитание (-), умножение (*) и деление (/). Вокруг операторов + и - обязательно должны быть пробелы.

  <div class="sidebar">Sidebar (100% - 240px)</div>

Смешивание единиц

Главное преимущество calc() — возможность объединять несовместимые единицы, которые иначе невозможно было бы смешать:

  <div class="hero">Hero</div>
  <div class="column">Column</div>

calc() с переменными CSS

Объединяйте calc() с пользовательскими свойствами CSS для создания динамических токенов дизайна:

  <div class="main">Main content</div>

Вложенный calc()

Функцию calc() можно вкладывать, хотя это редко требуется, поскольку каждый контекст уже самостоятельно вычисляет выражения:

  <div class="element">Element</div>

calc() для гибкой типографики

Используйте calc(), чтобы создать линейную интерполяцию между двумя размерами:

  <h1>Fluid Heading</h1>

Деление в calc()

При делении делитель должен быть числом без единиц измерения:

  <div class="thirds">Third width</div>

calc() с Grid и Flexbox

Полезно внутри определений треков и свойства flex-basis:

  <div class="grid"><div>A</div><div>B</div></div>

calc() и другие функции

Когда какую функцию использовать:

  • calc(): произвольные арифметические вычисления, особенно при смешивании единиц
  • min()/max(): выбор меньшего или большего из вариантов
  • clamp(): ограничение гибкого значения диапазоном от минимального до максимального

Поддержка браузерами

calc() поддерживается всеми современными браузерами и IE11. Это одна из наиболее широко поддерживаемых функций CSS. В любом современном проекте её можно безопасно использовать без запасных вариантов.

Распространённые шаблоны calc()

Практические шаблоны, которые Вы будете использовать снова и снова:

  <div class="full-height">Full height minus header</div>
  <div class="half-minus-gap">Half minus gap</div>
  <div class="row"><div class="thirds-with-gaps">Third</div></div>

Быстрая проверка

Какое выражение calc() даёт правильный результат для выражения «30% от родителя минус 20px»?

Итоги

calc() позволяет выполнять арифметические вычисления в CSS со смешанными единицами. С его помощью создаются динамические макеты, например «вся область просмотра минус фиксированный заголовок», а также выполняется интерполяция для гибкой типографики. Вокруг операторов + и - необходимы пробелы. Объединяйте calc() с переменными CSS для мощных вычислений с токенами дизайна. Используйте её вместе с min/max/clamp для полного управления гибкими размерами.

Часто задаваемые вопросы

Урок «calc() для динамических вычислений» бесплатный?

Да — полный текст урока «calc() для динамических вычислений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «calc() для динамических вычислений»?

Смешивайте единицы измерения и выполняйте арифметические операции в CSS с помощью функции calc() для получения динамических значений. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «calc() для динамических вычислений»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. calc() для динамических вычислений
  2. min(), max() и clamp() для плавных значений
  3. repeat() и minmax() в Grid
  4. color-mix() и относительный синтаксис цвета
← Назад к CSS Academy