Ответ
Функция calc() позволяет выполнять математические вычисления прямо в CSS. Она работает с разными единицами измерения (px, %, em, rem и т.д.), автоматически конвертируя их при вычислениях.
.container {
width: calc(100% - 40px); /* Ширина минус отступы */
height: calc(100vh - 2rem); /* Высота экрана минус размер шрифта */
padding: calc(1em + 5px); /* Динамический padding */
}Особенности:
- Обязательно ставить пробелы вокруг операторов (
+,-,*,/) - Можно комбинировать разные единицы измерения
- Поддерживается во всех современных браузерах
- Полезно для адаптивного дизайна
Ответ 18+ 🔞
Да ты посмотри, что эти фронтендеры выдумали, ёпта! Раньше, блядь, всё было просто: ширина 200 пикселей — и хрен с горы. А теперь, сука, calc()! Прям как в школе на алгебре, только вместо иксов — проценты и пиксели в одном уравнении.
Вот смотри, как это выглядит, этот ваш высший пилотаж:
.container {
width: calc(100% - 40px); /* От всей ширины отгрызли по 20 пикселей с боков, чтоб не прилипало */
height: calc(100vh - 2rem); /* От всей высоты окна отняли два таких... шрифтовых размера, блядь */
padding: calc(1em + 5px); /* А тут вообще гибрид собрали, эбонитовый, из относительных и абсолютных единиц */
}А главная фишка, на которую все постоянно забивают, — пробелы! Вокруг каждого плюса, минуса, звёздочки — пробел обязателен, сука! Иначе браузер посмотрит на эту абракадабру, и у него волнение ебать, терпения ноль ебать, и он просто проигнорирует всю строку. И всё, пиздец вашему адаптиву.
Раньше, чтобы колонку с фиксированным сайдбаром сделать, надо было мозги наизнанку вывернуть, а теперь — calc(100% - 300px) и в рот меня чих-пых, готово! Удобная, блядь, штука. Все современные браузеры её жрут, как горячие пирожки. Так что юзайте, не стесняйтесь, главное — пробелы не забывайте, а то будете потом сидеть и думать: «Э, бошка, думай, че не работает-то?».