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) и др.