Как использовать свойство 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 с умом и всегда смотите, что получаете на выходе - так сможете избежать множества ошибок.

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!