Изучите свойства отображения в CSS

CSSCSSBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом лабе студенты изучат фундаментальные свойства отображения CSS, которые контролируют макет и видимость веб-элементов. С помощью серии практических упражнений участники научатся манипулировать свойствами отображения блока, строчного, строчно-блочного и none, приобретя практические навыки по структурированию и управлению макетами веб-страниц. В лабе рассматриваются ключевые концепции, такие как понимание, как различные свойства отображения влияют на позиционирование элементов, создание навигационных меню и управление видимостью элементов, что дает полное введение в методы макетирования CSS.

Работая с примерами и демонстрациями кода, ученики получат твердый понять, как свойства отображения влияют на веб-дизайн, что позволит им создавать более гибкие и отзывчивые макеты веб-страниц. Шаги позволяют студентам постепенно наращивать свои знания, начиная от основных характеристик элементов уровня блока и заканчивая более продвинутыми реализациями свойств отображения.

Разобраться с свойством отображения блока

В этом шаге вы узнаете о свойстве отображения блока в CSS, которое является фундаментальной концепцией для управления макетом веб-элементов. По умолчанию у многих HTML-элементов свойство отображения уровня блока.

Сначала создадим HTML-файл для демонстрации свойств отображения блока. Откройте WebIDE и создайте новый файл с именем block-display.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Block Display Property</title>
    <style>
      .block-element {
        display: block;
        background-color: lightblue;
        padding: 10px;
        margin: 10px 0;
        border: 2px solid blue;
      }
    </style>
  </head>
  <body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
  </body>
</html>

Основные характеристики элементов уровня блока:

  • Они всегда начинаются с новой строки
  • По умолчанию они занимают всю доступную ширину
  • Их можно применить свойства ширины, высоты, отступов и заполнения
  • Блочные элементы накапливаются вертикально один за другим

Проверим содержимое файла:

cat ~/project/block-display.html

Пример вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Block Display Property</title>
    <style>
       .block-element {
            display: block;
            background-color: lightblue;
            padding: 10px;
            margin: 10px 0;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div class="block-element">This is a block-level div element</div>
    <div class="block-element">Another block-level div element</div>
    <p class="block-element">This is a block-level paragraph</p>
</body>
</html>

Общие элементы уровня блока включают:

  • <div>
  • <p>
  • <h1> до <h6>
  • <section>
  • <article>
  • <ul> и <ol>

Применить свойство отображения строчного

В этом шаге вы узнаете о свойстве отображения строчного в CSS, которое позволяет элементам располагаться горизонтально и занимать только столько ширины, сколько необходимо.

Создадим HTML-файл для демонстрации свойств отображения строчного. Откройте WebIDE и создайте новый файл с именем inline-display.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline Display Property</title>
    <style>
      .inline-element {
        display: inline;
        background-color: lightgreen;
        padding: 5px;
        margin: 5px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
  </body>
</html>

Основные характеристики элементов строчного уровня:

  • Они располагаются горизонтально в одной строке
  • Они занимают только столько ширины, сколько необходимо
  • Свойства ширины и высоты не действуют
  • Вертикальные отступы и поля имеют ограниченное действие
  • Ширину и высоту нельзя устанавливать напрямую

Проверим содержимое файла:

cat ~/project/inline-display.html

Пример вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline Display Property</title>
    <style>
      .inline-element {
            display: inline;
            background-color: lightgreen;
            padding: 5px;
            margin: 5px;
            border: 2px solid green;
        }
    </style>
</head>
<body>
    <span class="inline-element">First inline element</span>
    <span class="inline-element">Second inline element</span>
    <a href="#" class="inline-element">Inline link</a>
</body>
</html>

Общие элементы строчного уровня включают:

  • <span>
  • <a>
  • <strong>
  • <em>
  • <img>

Реализовать свойство отображения строчно-блочного

В этом шаге вы узнаете о свойстве отображения строчно-блочного в CSS, которое сочетает наилучшие свойства как строчных, так и блоковых элементов.

Создадим HTML-файл для демонстрации свойств отображения строчно-блочного. Откройте WebIDE и создайте новый файл с именем inline-block-display.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Inline-Block Display Property</title>
    <style>
      .inline-block-element {
        display: inline-block;
        background-color: lightsalmon;
        padding: 10px;
        margin: 10px;
        border: 2px solid red;
        width: 150px;
        height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
  </body>
</html>

Основные характеристики элементов строчно-блочного уровня:

  • Располагаются горизонтально, как строчные элементы
  • Может иметь ширину, высоту, отступы и поля, как блоковые элементы
  • Позволяет точно контролировать размер и расстояние между элементами
  • Пригоден для создания горизонтальных макетов, таких как навигационные меню или галереи изображений

Проверим содержимое файла:

cat ~/project/inline-block-display.html

Пример вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline-Block Display Property</title>
    <style>
     .inline-block-element {
            display: inline-block;
            background-color: lightsalmon;
            padding: 10px;
            margin: 10px;
            border: 2px solid red;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div class="inline-block-element">First inline-block element</div>
    <div class="inline-block-element">Second inline-block element</div>
    <div class="inline-block-element">Third inline-block element</div>
</body>
</html>

Общие сценарии использования строчно-блочного отображения:

  • Создание горизонтальных навигационных меню
  • Дизайн галерей изображений
  • Выравнивание элементов рядом с точным контролем

Использовать свойство отображения none для скрытия элементов

В этом шаге вы узнаете о свойстве display: none в CSS, которое полностью удаляет элемент из макета страницы, делает его невидимым и не занимает места.

Создадим HTML-файл для демонстрации свойства отображения none. Откройте WebIDE и создайте новый файл с именем none-display.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>None Display Property</title>
    <style>
      .visible-element {
        background-color: lightblue;
        padding: 10px;
        margin: 10px;
      }

      .hidden-element {
        display: none;
        background-color: lightgray;
        padding: 10px;
        margin: 10px;
      }

      .toggle-button {
        padding: 5px 10px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">
      Toggle Hidden Element
    </button>

    <script>
      function toggleElement() {
        var hiddenDiv = document.getElementById("hiddenDiv");
        if (hiddenDiv.style.display === "none") {
          hiddenDiv.style.display = "block";
        } else {
          hiddenDiv.style.display = "none";
        }
      }
    </script>
  </body>
</html>

Основные характеристики display: none:

  • Полностью удаляет элемент из макета страницы
  • Элемент не занимает места
  • Отличается от visibility: hidden (которое сохраняет место, но делает элемент невидимым)
  • Пригоден для динамического скрытия содержимого и адаптивного дизайна

Проверим содержимое файла:

cat ~/project/none-display.html

Пример вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>None Display Property</title>
    <style>
       .visible-element {
            background-color: lightblue;
            padding: 10px;
            margin: 10px;
        }

       .hidden-element {
            display: none;
            background-color: lightgray;
            padding: 10px;
            margin: 10px;
        }

       .toggle-button {
            padding: 5px 10px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="visible-element">This element is always visible</div>
    <div id="hiddenDiv" class="hidden-element">This element is hidden</div>
    <button class="toggle-button" onclick="toggleElement()">Toggle Hidden Element</button>

    <script>
        function toggleElement() {
            var hiddenDiv = document.getElementById('hiddenDiv');
            if (hiddenDiv.style.display === 'none') {
                hiddenDiv.style.display = 'block';
            } else {
                hiddenDiv.style.display = 'none';
            }
        }
    </script>
</body>
</html>

Общие сценарии использования display: none:

  • Условное скрытие элементов
  • Создание адаптивных меню
  • Управление видимостью динамического содержимого
  • Реализация выпадающих и切换 интерфейсов

Создать навигационное меню с помощью свойств отображения

В этом шаге вы создадите горизонтальное навигационное меню, используя свойства отображения, изученные на предыдущих шагах. Этот практический пример покажет, как использовать отображение строчно-блочного для создания адаптивного и чистого навигационного макета.

Создадим HTML-файл с навигационным меню. Откройте WebIDE и создайте новый файл с именем navigation-menu.html в каталоге ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Navigation Menu</title>
    <style>
      .nav-menu {
        background-color: #333;
        padding: 10px;
      }

      .nav-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .nav-menu li {
        display: inline-block;
        margin-right: 20px;
      }

      .nav-menu a {
        text-decoration: none;
        color: white;
        font-family: Arial, sans-serif;
        transition: color 0.3s ease;
      }

      .nav-menu a:hover {
        color: #ffd700;
      }
    </style>
  </head>
  <body>
    <nav class="nav-menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </body>
</html>

Основные техники, используемые в этом навигационном меню:

  • display: inline-block для пунктов меню
  • Удаление стандартной стилизации списка
  • Добавление эффектов наведения
  • Создание горизонтального макета

Проверим содержимое файла:

cat ~/project/navigation-menu.html

Пример вывода:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigation Menu</title>
    <style>
       .nav-menu {
            background-color: #333;
            padding: 10px;
        }

       .nav-menu ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

       .nav-menu li {
            display: inline-block;
            margin-right: 20px;
        }

       .nav-menu a {
            text-decoration: none;
            color: white;
            font-family: Arial, sans-serif;
            transition: color 0.3s ease;
        }

       .nav-menu a:hover {
            color: #ffd700;
        }
    </style>
</head>
<body>
    <nav class="nav-menu">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Лучшие практики для навигационных меню:

  • Использовать семантические HTML5-теги, такие как <nav>
  • Сохранять простую структуру меню
  • Обеспечить хорошую читаемость и доступность
  • Добавить состояния наведения и активности для улучшения взаимодействия с пользователем

Резюме

В этом практическом занятии участники изучали свойства отображения в CSS, сосредоточившись на том, как различные значения отображения влияют на макет веб-страницы и поведение элементов. Практическое занятие началось с изучения свойства отображения блока, демонстрации того, как элементы уровня блока занимают всю ширину, начинаются с новой строки и могут быть стилизованы с использованием полей, отступов и границ. Участники узнали о распространенных элементах уровня блока, таких как <div>, <p> и теги заголовков, и о том, как они естественно накапливаются вертикально в документе.

Следующие шаги помогли ученикам применить свойства отображения строчного, строчно-блочного и none, дайте практические рекомендации по управлению отображением элементов и их видимостью. Создавая практические примеры и экспериментируя с CSS-стилями, участники приобрели практический опыт в управлении характеристиками отображения элементов, в конечном итоге поняли, как создавать более гибкие и адаптивные макеты веб-страниц с использованием свойств отображения в CSS.