Свойство display и его значения: Тренажер CSS

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

Свойство `display` в CSS определяет тип отображения элемента. Различные значения свойства `display` позволяют элементам вести себя по-разному в макете страницы. Мы начнем с основных значений и постепенно перейдем к более сложным. Понимание `display` критически важно для создания гибких и адаптивных веб-страниц.

Список тем

Блочные элементы

Измените отображение элементов <span> так, чтобы они занимали всю доступную ширину и переносились на новую строку.

CSS

span {
  input1: block;
}

                     span {
  input1: block;
}

HTML

<div>
  <span>Элемент 1</span>
  <span>Элемент 2</span>
  <span>Элемент 3</span>
</div>

Используйте значение display, которое преобразует inline-элементы в блочные

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

Результат

Сообщения

Выполнить

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

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

Горизонтальное меню

Расположите пункты меню в одну строку с сохранением возможности задания размеров.

CSS

.menu-item {
  input1: inline-block;
  width: 120px;
}

                     .menu-item {
  input1: inline-block;
  width: 120px;
}

HTML

<nav>
  <a href="#" class="menu-item">Главная</a>
  <a href="#" class="menu-item">О нас</a>
  <a href="#" class="menu-item">Контакты</a>
</nav>

Используйте гибридное значение, сочетающее особенности block и inline

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

Результат

Сообщения

Выполнить

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

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

Скрытый элемент

Сделайте секцию с предупреждением полностью невидимой на странице.

CSS

.alert {
  input1: none;
}

                     .alert {
  input1: none;
}

HTML

<div class="alert">Важное сообщение!</div>

Используйте значение, которое полностью удаляет элемент из потока документа

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

Результат

Сообщения

Выполнить

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

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

Гибкий контейнер

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

CSS

.products {
  input1: flex;
  input2: space-between;
}

                     .products {
  input1: flex;
  input2: space-between;
}

HTML

<div class="products">
  <div class="product">Товар 1</div>
  <div class="product">Товар 2</div>
  <div class="product">Товар 3</div>
</div>

Используйте современный метод раскладки flex

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

Результат

Сообщения

Выполнить

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

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

Сетка изображений

Создайте сетку из трех колонок для равномерного размещения изображений.

CSS

.gallery {
  input1: grid;
  input2: repeat(3, 1fr);
}

                     .gallery {
  input1: grid;
  input2: repeat(3, 1fr);
}

HTML

<div class="gallery">
  <img src="https://naytikurs.ru/img/1.png" alt="">
  <img src="https://naytikurs.ru/img/2.png" alt="">
  <img src="https://naytikurs.ru/img/4.png" alt="">
</div>

Используйте современную grid-раскладку

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

Результат

Сообщения

Выполнить

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

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

Комбинированный макет

Создайте адаптивный макет с сайдбаром и основным контентом, используя разные типы раскладок.

CSS

.container {
  input1: flex;
}

.sidebar {
  input2: inline-block;
}

@media (max-width: 600px) {
  .sidebar {
    input3: none;
  }
}

                     .container {
  input1: flex;
}

.sidebar {
  input2: inline-block;
}

@media (max-width: 600px) {
  .sidebar {
    input3: none;
  }
}

HTML

<div class="container">
  <aside class="sidebar">Меню</aside>
  <main class="content">Контент</main>
</div>

Комбинируйте разные значения display для сложных макетов

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

Результат

Сообщения

Выполнить

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

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