Функция calc() [Модуль 12: Современные возможности CSS]: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этом разделе собраны упражнения для отработки использования функции `calc()` в CSS. Эта функция позволяет выполнять математические расчеты прямо в значениях свойств CSS. Вы будете работать с готовым HTML и CSS кодом, где вам нужно будет заполнить пропуски, чтобы достичь нужного визуального результата. Задания охватывают основные операции (`+`, `-`, `*`, `/`) и использование различных единиц измерения (`px`, `%`, `em`, `vh`, `vw`) в расчетах для таких свойств, как `width`, `height`, `padding`, `margin`, `font-size` и других.

Список тем

Расчет ширины блока

id: 37482_calc-01

Задайте ширину синего блока так, чтобы она была на 30 пикселей меньше, чем 100% ширины его родителя. Родительский контейнер имеет серый фон.

CSS

.container {
  width: 100%;
  height: 100px;
  background-color: #eee;
  padding: 10px;
  box-sizing: border-box;
}

.inner-block {
  height: 100%;
  background-color: steelblue;
  /* Задайте ширину здесь */
  width: input1;
}

                     .container {
  width: 100%;
  height: 100px;
  background-color: #eee;
  padding: 10px;
  box-sizing: border-box;
}

.inner-block {
  height: 100%;
  background-color: steelblue;
  /* Задайте ширину здесь */
  width: input1;
}

HTML

<div class="container">
  <div class="inner-block"></div>
</div>

Используйте функцию `calc()` для свойства `width`. Внутри функции вычтите `30px` из `100%`. Не забудьте про пробелы вокруг оператора `-`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Высота почти во весь экран

id: 37482_calc-02

Сделайте так, чтобы высота зеленого блока была равна высоте области просмотра (viewport) минус 80 пикселей. Это часто используется для создания 'липкого' футера или шапки.

CSS

.full-height-element {
  width: 100%;
  background-color: lightgreen;
  /* Задайте высоту здесь */
  height: calc(100vh input1 80px);
}

                     .full-height-element {
  width: 100%;
  background-color: lightgreen;
  /* Задайте высоту здесь */
  height: calc(100vh input1 80px);
}

HTML

<div class="full-height-element">
  Содержимое блока...
</div>
<style>
  body { margin: 0; }
</style>

Используйте единицу `vh` (viewport height) для обозначения высоты области просмотра. Примените функцию `calc()` к свойству `height`, вычитая `80px` из `100vh`. Убедитесь, что оператор `-` окружен пробелами.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Отступы с расчетом

id: 37482_calc-03

Задайте внутренний отступ `padding` для оранжевого блока. Верхний и нижний отступы должны быть `10px`, а левый и правый должны рассчитываться как `5%` ширины родителя плюс `15px`.

CSS

.padded-box {
  width: 90%;
  height: 150px;
  background-color: coral;
  border: 1px solid #ccc;
  margin: 10px auto;
  /* Задайте padding здесь */
  padding: 10px input1(5% + 15px);
}

                     .padded-box {
  width: 90%;
  height: 150px;
  background-color: coral;
  border: 1px solid #ccc;
  margin: 10px auto;
  /* Задайте padding здесь */
  padding: 10px input1(5% + 15px);
}

HTML

<div class="padded-box">
  Текст внутри блока...
</div>

Свойство `padding` может принимать несколько значений. Используйте `calc()` для второго значения (левый/правый отступы). Внутри `calc()` сложите `5%` и `15px`, используя оператор `+` с пробелами вокруг.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Горизонтальное центрирование элемента фиксированной ширины

id: 37482_calc-04

Отцентрируйте фиолетовый блок шириной 120px по горизонтали внутри его родителя. Используйте свойство `left` и функцию `calc()` для расчета смещения.

CSS

.parent-container {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #f0f0f0;
}

.centered-element {
  position: absolute;
  width: 120px;
  height: 50px;
  background-color: mediumpurple;
  top: 25px;
  /* Задайте left с помощью calc */
  left: calc(input1 - input2);
}

                     .parent-container {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #f0f0f0;
}

.centered-element {
  position: absolute;
  width: 120px;
  height: 50px;
  background-color: mediumpurple;
  top: 25px;
  /* Задайте left с помощью calc */
  left: calc(input1 - input2);
}

HTML

<div class="parent-container">
  <div class="centered-element"></div>
</div>

Чтобы отцентрировать элемент, можно сместить его влево на 50% ширины родителя, а затем сдвинуть обратно влево на половину его собственной ширины (120px / 2 = 60px). Используйте `calc(50% - 60px)` для свойства `left`. Не забудьте установить `position: relative;` для родителя и `position: absolute;` для дочернего элемента.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Адаптивный размер шрифта

id: 37482_calc-05

Установите размер шрифта для текста так, чтобы он был базовым размером `14px` плюс `1.5vw` (1.5% от ширины области просмотра). Это позволит тексту немного масштабироваться вместе с размером окна.

CSS

.responsive-text {
  padding: 15px;
  border: 1px dashed blue;
  /* Задайте font-size с помощью calc */
  font-size: calc(14px input1 1.5input2);
}

                     .responsive-text {
  padding: 15px;
  border: 1px dashed blue;
  /* Задайте font-size с помощью calc */
  font-size: calc(14px input1 1.5input2);
}

HTML

<div class="responsive-text">
  Этот текст должен изменять свой размер в зависимости от ширины окна.
</div>

Используйте функцию `calc()` для свойства `font-size`. Сложите `14px` и `1.5vw` с помощью оператора `+`, окруженного пробелами.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Расчет ширины колонок

id: 37482_calc-06

Создайте три колонки одинаковой ширины внутри контейнера. Между колонками должен быть отступ `10px`. Используйте `calc()` для расчета ширины каждой колонки.

CSS

.row {
  display: flex;
  justify-content: space-between; /* Или используйте margin */
  background: #eee;
  padding: 5px;
  height: 120px;
}

.column {
  background: tomato;
  height: 100%;
  /* Задайте ширину колонки с помощью calc */
  width: calc((100% input1 20px) input2 3);
}

                     .row {
  display: flex;
  justify-content: space-between; /* Или используйте margin */
  background: #eee;
  padding: 5px;
  height: 120px;
}

.column {
  background: tomato;
  height: 100%;
  /* Задайте ширину колонки с помощью calc */
  width: calc((100% input1 20px) input2 3);
}

HTML

<div class="row">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
</div>

Общая ширина 100%. Есть два отступа по 10px, итого 20px. Оставшуюся ширину (`100% - 20px`) нужно разделить на 3 колонки. Используйте `calc((100% - 20px) / 3)` для свойства `width` каждой колонки. Обратите внимание на скобки для порядка операций.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Использование CSS переменной в calc()

id: 37482_calc-07

Задайте левый отступ (`margin-left`) для элемента `.item` равным удвоенному значению CSS переменной `--base-spacing`. Используйте `calc()` для выполнения умножения.

CSS

:root {
  --base-spacing: 15px;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  background-color: gold;
  padding: 10px;
  width: 70%;
  /* Задайте margin-left с помощью calc и переменной */
  margin-left: input1(var(--base-spacing) input2 2);
}

                     :root {
  --base-spacing: 15px;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
}

.item {
  background-color: gold;
  padding: 10px;
  width: 70%;
  /* Задайте margin-left с помощью calc и переменной */
  margin-left: input1(var(--base-spacing) input2 2);
}

HTML

<div class="container">
  <div class="item">Элемент с отступом</div>
</div>

Внутри функции `calc()` используйте `var(--base-spacing)` для получения значения переменной и умножьте его на `2` с помощью оператора `*`, окруженного пробелами.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку