Урок 26 із 104
25%
← Назад

Функція для обчислення в CSS

Вивчаємо функцію calc() у CSS для виконання математичних обчислень при створенні розмірів блоків.

Функція calc() у CSS

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

Синтаксис calc()


.block {
  width: calc(100% - 100px);
}

Усередині calc() можна використовувати додавання (+), віднімання (-), множення (*) та ділення (/). Між оператором і числами обов'язково повинні бути пробіли.


  <div class="block">
  Блок
</div>

.block {
  width: calc(100% - 100px);
  height: 100px;
  background-color: lightblue;
}

Використання різних одиниць вимірювання

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


.container {
  width: calc(50% + 200px);
}

У цьому прикладі ширина елемента буде дорівнювати половині ширини батьківського блоку плюс 200px.

❗ Важливо:

calc() особливо корисний у адаптивній верстці. Наприклад, можна зробити блок шириною calc(100% - ширина меню), не використовуючи JavaScript.

Практичні завдання

📌 Завдання:
  1. №1. Дан блок.
  2. Зробіть його ширину на 100px меншою за 100%.
  3. Використайте функцію calc().

<div class="block">
  Block
</div>
💡 Показати підказку

Потрібно відняти 100px від ширини батьківського елемента за допомогою calc().

✅ Показати відповідь

.block {
  width: calc(100% - 100px);
}
📌 Завдання:
  1. №2. Дан блок.
  2. Зробіть його ширину на 200px більшою за 50%.
  3. Використайте функцію calc().

<div class="block">
  Block
</div>
💡 Показати підказку

Необхідно додати 200px до половини ширини батьківського елемента.

✅ Показати відповідь

.block {
  width: calc(50% + 200px);
}