CSS свойство display элементов HTML-документа

Для позиционирования на экране различных устройств различных элементов HTML-документа применяются разные HTML-теги. Однако, стандартная разметка HTML не всегда подходит для правильного отображения того или иного элемента с точки зрения дизайна. Для того, чтобы правильно разместить тот или иной элемент иногда требуется поменять его стандартное поведение в массиве других, окружающих его документов. Для этих целей удобнее всего задать (или переопределить) CSS свойство display, которое определяет, как элемент должен быть показан в документе. В этой статье рассмотрим, какие значения может принимать свойство display и как это скажется на свойствах и поведении того, объекта, к которому это свойство применяется.

Честный VDS/VPS, на котором «Лунная База» живет уже 20+ лет

Задумываетесь о том, чтобы поднять свой pet-проект, сайт клиента или настроить окружение для разработки? Уже пора подумать, где арендовать железо.

Лунная База хостится на FirstVDS более 20 лет. Мыслей о том, чтобы перебраться на другой хостинг, не было ни разу (хотя опыт работы с другими вариантами, конечно, есть).

Бывали разные ситуации, но они бывают на любом железе. Главное, что нужно понять: здесь нет маркетинговой шелухи и сказок про «мы всё сделаем за вас». Если вы берете VDS — вам дают полный root, возможность накатить любую ОС и не лезут в ваши конфиги.

Если в саппорт написать с вопросом по вашему коду и получить ответ: «Читайте документацию и разбирайтесь сами» или «Обратитесь к профильному специалисту» — это не повод обижаться. Это повод углубить свои знания в DevOps и сайтостроении! Бегите от тех, кто пообещает: «Мы всё чиним и настраиваем абсолютно бесплатно!». Никто никогда не работает «по доброте душевной» в ущерб себе, а бесплатный сыр в администрировании обычно заканчивается сломанной базой данных.

Что по факту: Гибкое масштабирование ядер и RAM, экономия по сравнению с физическими серверами и адекватная панель ispmanager, если она вам нужна.

Посмотреть тарифы VDS/VPS

Значения CSS свойства display для элементов HTML-документа

• block
  • Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
• inline
  • Элемент отображается как строчный. Использование блочных элементов, таких, как <p> и <div>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
• inline-block
  • Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
• inline-table
  
  • Определяет, что элемент является таблицей, как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.
• inline-flex
  
  • Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
• flex
  
  • Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
• list-item
  
  • Элемент выводится как блочный и добавляется маркер списка.
• none
  • Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель (см.ниже). В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
• run-in
  • Устанавливает элемент как блочный или строчный, в зависимости от контекста.
• table
  • Определяет, что элемент является блочной таблицей, подобно использованию <table>.
• table-caption
  • Задаёт заголовок таблицы, подобно применению <caption>.
• table-cell
  • Указывает, что элемент представляет собой ячейку таблицы (<td> или <th>).
• table-column
  • Назначает элемент колонкой таблицы, словно был добавлен <col>.
• table-column-group
  • Определяет, что элемент является группой одной или более колонок таблицы, как при использовании <colgroup>.
• table-footer-group
  • Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой <tfoot>.
• table-header-group
  • Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой <thead>.
• table-row
  • Элемент отображается как строка таблицы <tr>.
• table-row-group
  • Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию <tbody>.

Объектная модель CSS свойства display для элементов HTML-документа

Для доступа к уже установленному CSS свойству display выбранного элемента (объекта) HTML-документа можно воспользоваться его объектной моделью и с помощью JavaScript переопределить его значение на странице уже в собранном (отображённом) на экране документе. На этом основана работа большинства алгоритмов открытия/закрытия всплывающих окон, когда по определённым событиям (кликам) свойство требуемого объекта (всплывающего окна) меняется со значения display: block; на display: none; и обратно. Доступ к свойству display выбранного элемента (объекта) HTML-документа происходит с помощью изменения свойств в следующем объекте:

Объект.style.display

Резюме

Большинство описанных выше CSS свойств display для элементов HTML-документа правильно и единообразно работают во всех современных браузеров как для настольных компьютеров, так и в мобильных устройствах.

Самый честный хостинг за 20+ лет существования Лунной Базы

Задумываешься о том, чтобы поднять свой сайт в Интернете? Уже пора подумать о том, какой хостинг выбрать?

Лунная База хостится 20+ лет на firstDVS. При этом, мыслей о том, чтобы перебраться на другой хостинг не было. (Но, при этом есть опыт работы с другими вариантами.)

Бывали с firstDVS разные ситуации, но, они бывают на всех хостингах. Единственное, что тут важно понять, - это то, что никто ничего тебе не будет впаривать... Но, и работать за тебя тоже никто не станет. Если в саппорт ответили: «Читайте по ссылке и разбирайтесь сами...» или вообще «Обратитесь за помощью к специалисту», - это повод углубить свои знания в области сайтостроения, а не бежать к тем, что пообещают: «Мы всё чиним и всё делаем за своих клиентов абсолютно бесплатно!» Никто никогда ничего ни за кого "по доброте душевной" не делал, не делает и не будет делать!

Выбрать