Объясните концепцию функции CSS calc() и как её можно использовать.

Функция calc() в CSS — это мощный инструмент, который позволяет вам проводить математические вычисления для задания значений CSS-пропорций. С помощью этой функции можно комбинировать различные единицы измерения, такие как пиксели (px), проценты (%) и другие.

Основной синтаксис

Синтаксис функции calc() выглядит следующим образом:

selector {
    property: calc(expression);
}

Где expression — это математическое выражение, например, 100px + 20% или 50vh - 10px.

Примеры использования

1. Комбинирование единиц измерения
   Допустим, у вас есть контейнер, ширину которого вы хотите сделать равной 100% ширины родительского элемента, минус фиксированная величина:

   .container {
       width: calc(100% - 50px);
       background-color: lightblue;
   }
   

   
   В этом примере ширина контейнера будет равна 100% ширины родителя, вычтя 50 пикселей.
2. Рассчет для отступов
   Если необходимо добавить верхний отступ, который будет в 20 пикселей больше 5% высоты окна:

   .box {
       margin-top: calc(5% + 20px);
       height: 200px;
       background-color: salmon;
   }
   

3. Гибкие размеры шрифтов
   Функция calc() может быть полезной и для адаптивного дизайна. Например, для задания размера шрифта:

   h1 {
       font-size: calc(2rem + 1vw);
   }
   

   
   В данном случае размер шрифта будет изменяться в зависимости от ширины окна (1vw), что делает текст более адаптивным.

Ограничения

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

/* Верно */
width: calc(100% - 50px);

/* Неправильно, это вызывает ошибку */
width: calc(100% -  50px);

Заключение

Функция calc() предоставляет фронтенд-разработчикам большую гибкость при работе с разметкой и стилями. Используя её, вы можете достигать более сложных компоновок и адаптивных дизайнов. Не бойтесь экспериментировать с calc() для улучшения ваших проектов.