Функция calc(): Тренажер CSS

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

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

Список тем

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

Задайте ширину синего блока так, чтобы она была на 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%`. Не забудьте про пробелы вокруг оператора `-`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Сделайте так, чтобы высота зеленого блока была равна высоте области просмотра (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`. Убедитесь, что оператор `-` окружен пробелами.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Задайте внутренний отступ `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`, используя оператор `+` с пробелами вокруг.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Отцентрируйте фиолетовый блок шириной 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;` для дочернего элемента.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Установите размер шрифта для текста так, чтобы он был базовым размером `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` с помощью оператора `+`, окруженного пробелами.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

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

Создайте три колонки одинаковой ширины внутри контейнера. Между колонками должен быть отступ `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()

Задайте левый отступ (`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` с помощью оператора `*`, окруженного пробелами.

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

Результат

Сообщения

Выполнить

Отметить решенным

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