Свойства display и visibility // Вебшкола онлайн

 back-6116369 next-6168054

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

Скрывание элемента — display:none или visibility:hidden

Вы можете скрыть элемент двумя способами. Для этого надо задать:

  • display:none
  • visibility:hidden

При этом надо помнить, что эти способы дают разный результат:

1. visibility:hidden скрывает элемент, но пространство, которое он занимал не может быть занято другим элементом. Элемент скрывается, но оказывает влияние на разметку страницы.

h1.hidden {visibility:hidden;}

Посмотреть

2. display:none не только скрывает элемент, но и удаляет его из разметки страницы. Элемент скрывается, страница отображается так, как будто элемента нет.

h1.hidden {display:none;}

Посмотреть

Свойство Display — блочные и строчные элементы

Блочный элемент занимает всю строку, на этой же строке не может быть другого элемента.

Примеры блочных элементов:

Строчный элемент занимает необходимое ему пространство (в зависимости от своего содержимого) и может соседствовать с другими строчными элементами на одной строке.

Примеры строчных элементов:

Изменение отображения элемента

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

Следующий пример демонстрирует то, как можно отображать пункты списка как строчные элементы:

А в этом примере строчный элемент отображается как блочный:

span {display:block;}

Посмотреть

Заметка: изменение отображения элемента не изменяет тип элемента. Это значит, что после изменения отображения строчного элемента на блочный, вы не можете вкладывать в него блочные элементы.

 back-6116369 next-6168054