htmllessons.ru

Как использовать свойство display?
Главная фишка, которую вам всем нужно уяснить, это то, что данное свойство Display лишь помогает вам манипулировать блоками и самим контентом в совокупности на странице.
Наиболее фундаментальными свойствами display есть inline, block и none.
В соответствии inline делает то, что говорит - поля, которые отображаются inline, следуют за ходом строки. Якорь (ссылки) и выделение являются примерами элементов, которые по умолчанию отображаются встроенными.
Inline.
Следующий код, например, приведет к тому, что все элементы списка в списке будут отображаться рядом друг с другом в одной непрерывной строке, а не у каждого, имеющего свою собственную строку:
li {display: inline}
Block
block делает ящик автономным, помещая всю ширину содержащего его ящика, с эффективным разрывом строки до и после него. В отличие от встроенных блоков, блочные елементы Display позволяют больше манипулировать высотой, полями и отступами. Элементы заголовка и абзаца являются примерами элементов, которые по умолчанию отображаются в браузерах.
Блок-боксы.
Следующий пример превратит все ссылки в большие кликабельные блоки «nav»:
#navigation a {
дисплей: блок;
отступы: 20px 10px;
}
display: inline-block будет держать блок встроенным, но предоставит большую гибкость форматирования блоков, позволяя, например, оставлять поля справа и слева от блока.
None
ни один, ну, вообще не отображает окно, которое может показаться довольно бесполезным, но может быть использовано для достижения хорошего эффекта с динамическими эффектами, такими как включение и выключение расширенной информации по щелчку ссылки или в альтернативных таблицах стилей.
Table
ХОРОШО. Так что это были основы. Теперь для чего-то более продвинутого и редко используемого ...
Возможно, наилучшим образом можна понять свойства отображения, связанные с table, - это подумать о HTML tables.Вы сами сможете менять параметры таблицы и ее колонок.
Способ display идет дальше, давая нам таблицу-столбец, таблицу-строку-группу, таблицу-столбец-группу, таблицу-заголовок-группу, таблицу-нижний колонтитул и заголовок таблицы, и все они достаточно информативны. Непосредственно очевидное преимущество этих значений состоит в том, что вы можете строить таблицу по столбцам, а не по методу смещения строк, используемому в HTML.
Конец-концос, значение inline-table в основном убирает разрыв в таблицах до и после них.
Другие типы отображения
list-item отображает поле так, как вы обычно ожидаете, что будет отображаться ли HTML-элемент.
run-in делает блок либо встроенным, либо блоком, в зависимости от отображения его родителя.
Используйте свойство Display с умом и всегда смотите, что получаете на выходе - так сможете избежать множества ошибок.
Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!