calc() в CSS — это функция, которая позволяет вычислять математические выражения в CSS-свойствах.
С помощью функции calc() можно выполнить простые математические вычисления, например, сумму или вычитание значений размеров:
.box {
width: calc(100% - 20px);
}
Этот CSS-код устанавливает ширину элемента .box на 100% ширины родительского элемента за вычетом 20 пикселей. Функция calc() вычислит значение 100% минус 20px и присвоит его свойству width.
Также можно использовать calc() для задания пропорций или относительных размеров, например:
.box {
width: calc(50% / 3);
height: calc(100vh - 50px);
font-size: calc(16px + 0.5vw);
}
В этом примере, ширина .box будет равна трети ширины родительского элемента, высота будет равна 100% высоты окна браузера за вычетом 50 пикселей, а размер шрифта будет зависеть от ширины окна, увеличиваясь на 0.5vw (0,5% от ширины окна).
Функция calc() может использоваться вместе со многими CSS-свойствами, например, с width, height, padding, border, margin, font-size, line-height и др. Она может содержать различные значения, включая проценты, пиксели, эмы (em) и др.





