CSS 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.

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

calc(<expression>);

Функція calc може отримувати єдине значення:

<expression>

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

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	26	16	7	15	12

Підтримка: мобільні переглядачі

Переглядач
	37	28	16	7

Приклади

+ запропонувати свій приклад у пісочниці