02.01.2019
1810
Как использовать свойство display?

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

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