css.in.ua
Підтримати

CSS function calc()

Опис

calc() - функція в CSS, яка дозволяє використовувати математичні вирази для визначення значень властивостей. Ця функція є потужним інструментом для створення гнучких і динамічних макетів на веб-сайті.

Функція calc() дозволяє змішувати різні властивості і значення за допомогою математичних операцій, таких як додавання (+), віднімання (-), множення (*), ділення (/) та інших. Вона дозволяє використовувати результати цих виразів для задання значень CSS властивостей.

Приклад використання:

Допустимо, ми маємо елемент з класом .child-element, і ми хочемо, щоб його ширина займала 100% ширини батьківського елемента, але при цьому з відступом 20px. Ми можемо використати функцію calc() для цього:

.child-element {
  width: calc(100% - 20px);
}

У цьому прикладі, ширина .child-element буде займати 100% ширини його батьківського елемента, за винятком 20 пікселів. Завдяки функції calc(), ми можемо зручно використовувати математичний вираз для задання ширини елемента, виходячи з ширини батьківського елемента та додаткового відступу. Це дозволяє нам створювати більш гнучкі та адаптивні макети залежно від зміни контенту або розмірів елементів на сторінці.

Порада:

Пам'ятайте, що calc() працює тільки з CSS властивостями, які приймають числові значення. Вона не може бути використана для властивостей, які приймають рядкові значення, наприклад, background-color або font-family.
Порада:

Будьте обережні з одиницями виміру, які використовуєте у виразі calc(). Переконайтеся, що використовуєте сумісні одиниці виміру, інакше можуть виникнути непередбачувані проблеми.

Синтаксис

calc(<expression>);
<expression>

Математичний вираз, який містить числа, оператори і одиниці виміру CSS. Математичний вираз може включати:

  • + - додавання;
  • - - віднімання;
  • * - множення;
  • / - ділення;
  • () - дужки - пріоритет операторів;

Переглядачі

Переглядач

26

16

7

15

12
Переглядач

37

28

16

7

Мобільних переглядачів ще не додано.

Приклади


Після наведення курсору на елемент, його ширина зменшується.

Ми маємо два однакових елементи, але функція calc() використовується для зміни колірного прозорості одного з них.

Спільнота

Зв'язок