Макет CSS — свойство отображения
Свойство displayявляется наиболее важным свойством CSS для управления макетом.
Свойство отображения
Свойство displayуказывает, отображается ли элемент.
Каждый элемент HTML имеет отображаемое значение по умолчанию в зависимости от типа элемента. Значение отображения по умолчанию для большинства элементов равно blockили
inline.
Нажмите, чтобы показать панель
This panel contains a <div> element, which is hidden by default (display: none).
It is styled with CSS, and we use JavaScript to show it (change it to (display: block).
Элементы уровня блока
Блочный элемент всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправо, насколько это возможно).
Примеры элементов блочного уровня:
- <дел>
- <h1> - <h6>
- <p>
- <форма>
- <заголовок>
- <нижний колонтитул>
- <раздел>
Встроенные элементы
Встроенный элемент не начинается с новой строки и занимает столько ширины, сколько необходимо.
Это встроенный элемент <span> внутри абзаца.
Примеры встроенных элементов:
- <диапазон>
- <а>
- <изображение>
Дисплей: нет;
display: none;обычно используется с JavaScript для скрытия и отображения элементов без их удаления и повторного создания. Взгляните на наш последний пример на этой странице, если вы хотите узнать, как этого можно добиться.
Элемент <script>используется display: none;
по умолчанию.
Переопределить отображаемое значение по умолчанию
Как уже упоминалось, у каждого элемента есть отображаемое значение по умолчанию. Однако вы можете переопределить это.
Изменение встроенного элемента на блочный или наоборот может быть полезно для того, чтобы страница выглядела определенным образом и при этом соответствовала веб-стандартам.
Типичным примером является создание встроенных <li>элементов для горизонтальных меню:
Пример
li {
display: inline;
}
Примечание. Установка свойства отображения элемента изменяет только способ отображения элемента , а НЕ тип элемента. Таким образом, встроенный элемент with display: block;не может содержать внутри себя другие блочные элементы.
В следующем примере элементы <span> отображаются как блочные элементы:
Пример
span {
display: block;
}
В следующем примере элементы <a> отображаются как блочные элементы:
Пример
a {
display: block;
}
Скрыть элемент - отображение: нет или видимость: скрыто?
display:none
visibility:hidden
Перезагрузить
Скрыть элемент можно, установив для displayсвойства значение
none. Элемент будет скрыт, а страница будет отображаться так, как будто элемента там нет:
Пример
h1.hidden {
display: none;
}
visibility:hidden;также скрывает элемент.
Однако элемент по-прежнему будет занимать то же место, что и раньше. Элемент будет скрыт, но все равно повлияет на макет:
Пример
h1.hidden {
visibility: hidden;
}
Дополнительные примеры
This example demonstrates display: none; versus visibility: hidden;
This example demonstrates how to use CSS and JavaScript to show an element on
click.
CSS Display/Visibility Properties
| Property | Description |
|---|---|
| display | Specifies how an element should be displayed |
| visibility | Specifies whether or not an element should be visible |