CSS Layout - The display Property
Свойство display является наиболее важным свойством CSS для управления макетом.
Свойство Display
Свойство display указывает, отображается ли элемент.
Каждый элемент HTML имеет значение по умолчанию для отображения в зависимости от типа элемента. По умолчанию для большинства элементов отображается значение block или inline.
Click to show panel
Эта панель содержит элемент <div>, который скрыт по умолчанию ( display: none).
Это стиль с CSS, и мы используем JavaScript, чтобы показать его (изменить его на ( display: block).
Элементы уровня блока
Элемент уровня блока всегда начинается на новой строке и занимает всю имеющуюся ширину (растягивается влево и вправо, насколько это возможно).
Примеры элементов уровня блока:
- <div>
- <h1> - <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Встроенные элементы
Встроенный элемент не запускается на новой строке и занимает столько ширины, сколько необходимо.
Это встроенный элемент <span> внутри абзаца.
Примеры встроенных элементов:
- <span>
- <a>
- <img>
Дисплей: нет;
display: none;обычно используется с JavaScript для скрытия и отображения элементов без их удаления и повторного создания. Взгляните на наш последний пример на этой странице, если вы хотите знать, как это может быть достигнуто.
Элемент <script> использует display: none; по умолчанию.
Переопределить отображаемое значение по умолчанию
Как уже упоминалось, каждый элемент имеет значение по умолчанию Display. Однако это можно переопределить.
Изменение встроенного элемента в элемент Block или наоборот может оказаться полезным для того, чтобы страница выглядела определенным образом и по-прежнему соответствует веб-стандартам.
Типичным примером является создание встроенных элементов <li> для горизонтальных меню:
Пример
li {
display: inline;
}
Примечание: Установка свойства Display элемента только изменяет способ отображения элемента, а не тип элемента. Таким образом, встроенный элемент с display: block; не допускается
иметь другие элементы блока внутри него.
В следующем примере элементы <span> отображаются как элементы блока:
Пример
span {
display: block;
}
В следующем примере элементы <a> отображаются как элементы блока:
Пример
a {
display: block;
}
Скрытие элемента-отображение: нет или видимость: скрыто?
display:none
visibility:hidden
Reset
Скрытие элемента можно выполнить, задав для свойства display значение none.
Элемент будет скрыт, и страница будет отображаться, как если бы элемент не существует:
Пример
h1.hidden {
display: none;
}
visibility:hidden; также скрывает элемент.
Тем не менее элемент будет по-прежнему занимать то же пространство, как и раньше. Элемент будет скрыт, но по-прежнему влияет на макет:
Пример
h1.hidden {
visibility: hidden;
}
Другие примеры
Различия между дисплеем: нет; и видимость: скрытый;
В этом примере демонстрируется отображение: None; против видимости: скрытый;
Использование CSS вместе с JavaScript для отображения содержимого
В этом примере демонстрируется использование CSS и JavaScript для отображения элемента по щелчку.
Свойства отображения/видимости CSS
| Свойство | Описание |
|---|---|
| display | Определяет способ отображения элемента |
| visibility | Указывает, должен ли элемент быть видимым |