Функція calc()
в CSS – це простий спосіб виконати прості математичні дії прямо в CSS стилях без використання, наприклад, мови програмування PHP. Функція вміє працювати з чотирма простими математичними операторами: додавання (+), віднімання (–), множення (*) і ділення (/). З допомогою функції calc()
ви можете розрахувати значення властивостей CSS прямо під час їх визначення.
/* властивість: calc(математична дія); */width: calc(100% - 35px);
Математична дія, яку можна виконати для виразу, може приймати наступні форми:
+
(додавання). Приклад: width: calc(25px + 75px);
-
(віднімання). Приклад: padding-top: calc(50px - 7%);
*
(множення). Приклад: line-height: calc(20% * 2);
/
(ділення). Приклад: margin: calc(35% / 2);
calc(100% -35px)
буде інтерпретовано як величину в процентах та наступне за ним від’ємне число в пікселях (невірний вираз), в той час як вираз calc(100% - 35px)
– буде інтерпретовано як віднімання від процентів певної кількості пікселів (тобто, це буде правильний вираз).*
і /
не вимагають відділення від операндів пробілами, але це не заборонено і навіть вітається для кращого читання
Функція calc()
стає вкрай корисною, коли одне із значень є відносною одиницею (наприклад, %), а інше – фіксованою. Ця властивість дуже часто застосовується в адаптивному веб-дизайні.
Приклад використання: позиціонування об’єкта за допомогою відступу
У приклад нижче ми позиціонуємо блок на всю ширину вікна, з відступами по краях в 40px при будь-якому розмірі девайсу.
.block { position: absolute; width: 85%; /* Для браузерів, які не підтримують calc() */ width: calc(100% - 50px); padding: 15px; border: 1px #000 solid; }
Підтримка на подив досить хороша.
-moz-calc
.-webkit-calc
.-webkit-calc
.
Зміст статті Вступ: чому ціни вирішують все Що означає порівняння цін із конкурентами 5 причин,…
Останніми роками інтерес до саун у Києві помітно зріс. Це пов'язано не лише з модою…
У сучасному ритмі мегаполісу відпочинок став невід'ємною частиною турботи про здоров'я та емоційний стан. Особливо…
У сучасному світі цифрового маркетингу Facebook (Meta) залишається однією з найпотужніших платформ для просування бізнесу.…
Цей прилад став незамінним елементом арсеналу представників безлічі професій, але особливо актуальним серед військових. Тепловізор…
Постійний потік новин, робочих завдань і особистих турбот часто призводить до того, що в голові…