Функція 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
.
В сучасному світі, в якому стабільність електропостачання є ключовим фактором комфорту та безперебійної роботи, наявність…
Навіть якщо ви дуже талановиті і докладаєте великих зусиль, для деяких результатів просто потрібен час:…
Цей практичний урок допоможе вам перенести дані з вашого Excel-файлу (з деякими конкретними стовпцями) до…
Пиво – один із найпопулярніших напоїв, який поряд з чаєм та кавою відомий у всіх…
Досить часто у програмістів виникає спокуса написати якусь велику функцію, що повинна вирішувати певну задачу.…
Дискусії навколо цієї теми вас, певно, вже втомили. Але я в даній статті постараюсь показати…