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