HTML-верстка: инструменты и приемы профессиональной front-end разработки

Свойства CSS display и visibility


назад вперед

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

Рис.1

Рис. 2
Рис. 3

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

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

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

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

Пример

h1.hidden {visibility:hidden;}

Посмотреть

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

Пример

h1.hidden {display:none;}

Посмотреть


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

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

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

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

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


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

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

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

Пример

li {display:inline;}

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

Пример

span {display:block;}

Посмотреть

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



Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта