calc()
Оновлено: 16.01.2023
calc()
Використовується для вказівки обчислюваного значення властивостей, що як значення використовують розмір, кут, час, число. Це дає змогу задавати значення, що ґрунтуються на додаванні або відніманні різних одиниць вимірів, наприклад можна задати 100% - 20px. Якщо значення не може бути обчислено, воно ігнорується.
Синтаксис
Властивість: calc(<вираз>)
Значення
Вираз являє собою комбінацію значень розмірів і наступних знаків математичних дій.
- + — додавання (width: calc(20px + 20px));
- - — віднімання (padding: calc(10% - 10px););
- * — множення (height: calc(20%*2);)
- / — ділення. На нуль ділити заборонено (width: calc(100%/3);).
Знаки плюс і мінус мають відбиватися пробілами з двох боків.
Приклад
У цьому прикладі задається положення фонового малюнка як 20 пікселів від правого краю.
Примітка
Internet Explorer не підтримує calc всередині @keyframes.Firefox до версії 16 підтримує -moz-calc.
Chrome до версії 26 підтримує -webkit-calc.
Safari 6 підтримує -webkit-ca lc