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	9

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

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

Приклади

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

<div id="description">
  <h2>Приклад 1: зміна елемента після наведення курсору</h2>
  <p>У цьому прикладі ми показуємо, як за допомогою функції <code>calc()</code> можна змінювати властивості елемента при наведенні курсору. Після наведення курсору на елемент, його ширина зменшується.</p>
</div>

<div id="result">
  <div class="box"></div>
</div>

#description {
  background-color: #f5f5f5;
  padding: 20px;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  width: calc(200px - 20px);
  height: 200px;
  background-color: #4285f4;
  transition: width 0.3s ease;
}

.box:hover {
  width: calc(150px - 20px);
}

<div id="description">
  <h2>Приклад 2: елементи з різним фоновим кольором</h2>
  <p>У цьому прикладі ми показуємо, як функція <code>calc()</code> може бути використана для встановлення різних кольорів для елементів. Ми маємо два однакових елементи, але функція <code>calc()</code> використовується для зміни колірного прозорості того, що праворуч.</p>
</div>

<div id="result">
  <div class="box"></div>
  <div class="box calc-box"></div>
</div>

#description {
  background-color: #f5f5f5;
  padding: 20px;
  font-family: Arial, sans-serif;
  margin-bottom: 20px;
}

#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #4285f4;
}

.calc-box {
  background-color: rgba(66, 133, 244, calc(0.5 + 0.25));
}

<div class="wrap">
    <div class="bar good">calc(100% - 40px) — пробіли є, ширина порахована</div>
    <div class="bar bad">calc(100%-40px) — пробілів немає, правило відкинуто</div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.45;
    padding: 30px 24px;
}

.wrap {
    width: 420px;
    padding: 12px;
    border: 1px dashed #9aa4ae;
}

.bar {
    padding: 12px;
    margin-bottom: 10px;
    color: #fff;
}

.good {
    width: calc(100% - 40px);
    background: #2f7d4f;
}

.bad {
    width: calc(100%-40px);
    background: #b03a2e;
}