Display свойство: Свойство display – Все значения свойства display

Свойство display

Свойство display отвечает за вывод и визуальное отображение элементов на странице. Также с помощью свойства display можно изменить тип генерируемого контейнера. Свойство не наследуется.

Любой html-элемент генерирует на веб-странице прямоугольный контейнер. Все видимое на экране состоит из контейнеров разных типов.

В нормальном потоке блочные элементы генерируют структурные блоки и выводятся вертикально один над другим, занимая по ширине 100% ширины блока-контейнера.

Строковые контейнеры генерируют строковые блоки и выводятся в строке горизонтально. Ширина строковых элементов равна ширине их содержимого.

Строчно-блочный элемент также генерирует строку текста, при этом низ элемента располагается на базовой линии строки текста и не разрывает строку. Содержимое элемента форматируется так же, как и для блочных элементов, а ширина блока равна ширине содержимого.

Таблицы обрабатываются браузером как блоки. Внутренние элементы таблицы генерируют прямоугольные блоки, имеющие содержимое, отступы padding и рамки border, но не имеющие полей margin.

Таблица 1. Значения свойства display

display
Значения:
inline	Значение по умолчанию. Элемент генерирует строковый блок. Аналог — тег <span>.
block	Элемент генерирует структурный блок, как и тег <div>.
flex	Элемент генерирует структурный блок, который создает адаптивный контейнер для дочерних элементов.
inline-block	Элемент генерирует строковый блок.
inline-flex	Элемент генерирует строковый блок, который создает адаптивный контейнер для дочерних элементов.
inline-table	Элемент определяет структурный блок, который генерирует строковый блок.
list-item	Элемент генерирует структурный блок, который отображается как элемент списка <li>.
table	Элемент генерирует структурный блок. На странице ведет себя аналогично <table>.
table-caption	Элемент генерирует основной заголовок таблицы. На странице ведет себя аналогично <caption>.
table-column	Элемент описывает столбец ячеек, визуальное представление не генерируется. Аналог — <col>.
table-column-group	Элемент объединяет один или несколько столбцов. Аналог — <colgroup>.
table-cell	Элемент генерирует отдельную ячейку таблицы, на странице ведет себя аналогично <th> и <td>.
table-header-group	Элемент определяет группу строк заголовка, которая всегда отображается перед остальными строками и группами строк. Аналог — <thead>.
table-footer-group	Элемент определяет группу строк заголовка, которая всегда отображается после всех остальных строк и перед любым нижним основным заголовком. Ведет себя аналогично <tfoot>.
table-row-group	Элемент объединяет одну или несколько строк. Аналог — <tbody.
table-row	Элемент является строкой ячеек. Пример — <tr>.
none	Элемент не генерирует никакой контейнер, полностью удаляясь со страницы.
inherit	Наследует свойство от родительского элемента.

Свойство display — способ отображения элемента браузером

Свойство display — задает способ отображения элемента браузером.

Синтаксис

селектор { display: значение; }

Значения

Значение	Описание
block	Блочный элемент.
inline	Строчный элемент.
inline-block	Строчно-блочный элемент.
list-item	Элемент станет пунктом списка и перед ним появится маркер списка.
flex	Устанавливает элемент как блочный, а его потомки станут flex элементами.
inline-flex	Устанавливает элемент как строчно-блочный, а его потомки станут flex элементами.
grid	Создает элемент-сетку.
none	Элемент вообще пропадет и все остальные элементы будут вести себя так, как будто этого элемента нет.
table	Элемент будет вести себя как таблица.
table-cell	Элемент будет вести себя как ячейка таблицы.
inline-table	Элемент будет вести себя как таблица, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
table-caption	Элемент будет вести себя как тег caption.
table-column	Элемент будет вести себя как колонка таблицы.
table-row	Элемент будет вести себя как ряд таблицы.
table-column-group	Элемент будет вести себя как тег colgroup.
table-footer-group	Элемент будет вести себя как тег tfoot.
table-header-group	Элемент будет вести себя как тег thead.
table-row-group	Элемент будет вести себя как тег tbody.
run-in	Устанавливает элемент как блочный или встроенный в зависимости от контекста.

По умолчанию элементы могут иметь различные значения display.

СSS Свойство display

Пример

Использовать некоторых различных значений отображения:

p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

Редактор кода »

---

Определение и использование

Свойство display определяет поведение отображения (тип поля визуализации) элемента.

В HTML значение свойства отображения по умолчанию берется из спецификации HTML или из таблицы стилей браузера/пользователя по умолчанию. Значение по умолчанию в XML находится в строке, включая элементы SVG.

---

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
display	4.0	8.0	3.0	3.1	7.0

Примечание: Значения «flex» и «flex», «inline-flex» и «inline-flex» требует префикс -webkit- для работы с браузером Safari.

Примечание: «display: contents» не работает в Edge/Internet Explorer.

---

---

CSS Синтаксис

Значения свойств

Значение	Описание	Воспроизвести
inline	Отображает элемент как встроенный элемент (например, <span>). Любые свойства высоты и ширины не будут иметь никакого эффекта	Воспроизвести »
block	Отображает элемент в виде блочного элемента (например, <p>). Он начинается на новой линии и занимает всю ширину	Воспроизвести »
contents	Делает контейнер исчезнуть, создание дочерних элементов элемента на следующий уровень вверх в DOM	Воспроизвести »
flex	Отображает элемент в виде контейнера flex уровня блока	Воспроизвести »
grid	Отображение элемента в виде контейнера сетки уровня блока	Воспроизвести »
inline-block	Отображает элемент в виде контейнера блоков встроенного уровня. Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины	Воспроизвести »
inline-flex	Отображает элемент в виде контейнера flex встроенного уровня	Воспроизвести »
inline-grid	Отображает элемент в виде контейнера сетки встроенного уровня	Воспроизвести »
inline-table	Элемент отображается в виде таблицы встроенного уровня	Воспроизвести »
list-item	Пусть элемент ведет себя как элемент <li>	Воспроизвести »
run-in	Отображает элемент как блочный или встроенный в зависимости от контекста	Воспроизвести »
table	Пусть элемент ведет себя как элемент <table>	Воспроизвести »
table-caption	Пусть элемент ведет себя как элемент <caption>	Воспроизвести »
table-column-group	Пусть элемент ведет себя как элемент <colgroup>	Воспроизвести »
table-header-group	Пусть элемент ведет себя как элемент <thead>	Воспроизвести »
table-footer-group	Пусть элемент ведет себя как элемент <tfoot>	Воспроизвести »
table-row-group	Пусть элемент ведет себя как элемент <tbody>	Воспроизвести »
table-cell	Пусть элемент ведет себя как элемент <td>	Воспроизвести »
table-column	Пусть элемент ведет себя как элемент <col>	Воспроизвести »
table-row	Пусть элемент ведет себя как элемент <tr>	Воспроизвести »
none	Элемент полностью удален	Воспроизвести »
initial	Устанавливает для этого свойства значение по умолчанию. Прочитать о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитать о inherit

---

Примеры

Пример

Демонстрация того, как использовать содержание свойства знчений. В следующем примере контейнер (.a) исчезнет, и создадутся дочерние элементы (.b) дочерние элементы элемента на следующем уровне вверх в DOM:

.a {
  display: contents;
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}

.b {
  border: 2px solid blue;

  background-color: lightblue;
  padding: 10px;
}

Редактор кода »

Пример

Демонстрация того, как использовать наследование значения свойства :

body {
  display: inline;
}

p {
  display: inherit;
}

Редактор кода »

Пример

Установить направление некоторых гибких элементов внутри элемента <div> в обратном порядке:

div {
  display: -webkit-flex; /* Safari */
  -webkit-flex-direction: row-reverse; /* Safari 6.1+ */
  display: flex;
  flex-direction: row-reverse;
}

Редактор кода »

---

Связанные страницы

CSS Учебник: CSS Дисплей и видимость

HTML DOM Справочник: Свойство display

---

CSS свойство display | назначение, допустимые значения, примеры

Свойство display задает способ отображения элемента на странице.

Допустимые значения

• inline — элемент ведет себя как строчный (поддерживается IE, FF, Opera, Netscape, Safari, Chrome)
• block — элемент ведет себя как блочный (поддерживается IE, FF, Opera, Netscape, Safari, Chrome)
• none — «удаляет» элемент со страницы вместе с содержимым. Элемент не видим, на странице блоки располагаются так, словно элемента нет (поддерживается IE, FF, Opera, Netscape, Safari, Chrome)
• list-item — ведет себя как элемент списка (аналогично тегу li) — становится блочным элементом с маркером (поддерживается IE, FF, Opera, Netscape, Safari, Chrome)
• run-in — элемент ведет себя как строчный или блочный в зависимости от контекста (поддерживается IE8, Opera 9 и выше, Safari)
• compact — элемент ведет себя как строчный или блочный в зависимости от контекста (поддерживается Opera 9 и выше)
• inline-block — элемент ведет себя как строчный, но внутреннее форматирование происходит как у блочного (поддерживается IE, Opera, Safari)
• table — элемент ведет себя как таблица (тег table) (поддерживается Opera, Safari, Netscape, FF, Chrome)
• inline-table — элемент ведет себя как таблица и строчный элемент одновременно (поддерживается Opera 9+, Safari)
• table-row-group — элемент ведет себя как тег tbody (поддерживается Opera, Safari, Netscape, FF, Chrome)
• table-header-group — элемент ведет себя как тег thead (поддерживается Opera, Safari, Netscape, FF, Chrome)
• table-footer-group — элемент ведет себя как тег tfoot (поддерживается Opera, Safari, Netscape, FF, Chrome)
• table-row — элемент ведет себя как тег tr (поддерживается Opera, Safari, Netscape, FF, Chrome)
• table-column-group — элемент ведет себя как тег colgroup (поддерживается Opera 9+, Safari, Netscape, FF, Chrome)
• table-column — элемент ведет себя как тег col (поддерживается Opera 9+, Safari, Netscape, FF, Chrome)
• table-cell — элемент ведет себя как тег td (поддерживается Opera, Safari, Netscape, FF, Chrome)
• table-caption — элемент ведет себя как тег caption (поддерживается Opera, Safari, Netscape, FF, Chrome)
• inherit — наследует значение от родителя

Значение по умолчанию	inline
Применимо	ко всем элементам
Наследование	нет
Версия CSS	CSS 1
Поддерживается браузерами	Internet Explorer 6 и выше Firefox 1 и выше Opera 7 и выше Netscape 6 и выше Safari 1 и выше Chrome 1 и выше

Пример

div {
display: inline;
}

Твой код:

<html> <head> <title></title> <style type=»text/css»> <!— div { display: inline; } —> </style> </head> <body> <div>блок 1 </div> <div>блок 2 </div> </body> </html>Сделай код и жми тут

Результат:

большой полигон

Свойство elevation Свойство direction

CSS display | TuHub

Общие сведения

Все элементы на веб-странице — прямоугольные (смотрите свойство box-sizing чтобы больше узнать об этом). Тип блока в конечном итоге влияет на его визуальное поведение на странице.

В CSS есть два основных формата: inline и block.

Строчные элементы (iniline-level элементы) являются частью строки и не вызывают её прерывания. Типичными примерами являются HTML-элементы <span>, <em>, и <img>.

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

Синтаксис свойства

• Синтаксис:

  display: inline | block | list-item | inline-block | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

• Значение по умолчанию: inline
• Применяется: ко всем элементам и псевдоэлементам ::before и ::after
• Наследуется: нет
• Анимируется: нет

Значения свойства

• none — элемент полностью удаляется из потока страницы. Все дочерние элементы также удаляются со страницы. Страница отображается так как-будто этот элемент вообще не существует. Это значение нельзя переопределить устанавливая display в видимое значение для дочерних элементов.
• inline — создаёт строчный тип элемента.
• inline-block — создаёт строчно-блочный тип элемента. Похож на строчный тип, за исключением того что он позволяет задавать ширину и высоту 
• block — создаёт блочный тип элемента.
• list-item — создаёт блочный тип элемента и добавляет маркер списка.
• run-in — ведёт себя следующим образом:
  • Если  run-in содержит блочный элемент, то он ведёт себя как блочный тип.
  • Если после run-in идёт блочный элемент, то run-in элемент становится первым элементом внутри блочного элемента.
  • В других случаях ведёт себя как блочный тип.
• inline-table, table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption — каждое из этих значений заставляет элемент вести себя так как ведёт себя соответствующий HTML-элемент таблицы.
• flex — создаёт блочный тип элемента, а выводит содержимое в нём в соответствии с правилами Flexbox.
• inline-flex — создаёт строчный тип элемента, а выводит содержимое в нём в соответствии с правилами Flexbox.
• grid — создаёт блочный тип элемента, а выводит содержимое в нём в соответствии с правилами CSS Grid.
• inline-grid — создаёт строчный тип элемента, а выводит содержимое в нём в соответствии с правилами CSS Grid.
• contents — тип элемента не создаётся, но его дочерние элементы создают свои типы и текст внутри него отображается как обычно.

Поддержка браузерами

Все основные значения свойства display поддерживаются во всех основных браузерах.

Поддержка браузерами display:table-*

Поддержка браузерами dispay:run-in

Поддержка браузерами display:contents

Примечание

Тип элемента указанный с помощью свойства display также зависит от свойств float и position. Эти три свойства взаимодействуют между собой и влияют на созданный тип элемента. Обратитесь к этой таблице чтобы узнать как значения этих свойств взаимодействуют между собой.

Пример

Реализация синтаксиса с двумя значениями для свойства CSS display: что это значит

От автора: если вам нравится читать примечания к релизам, то вы, возможно, заметили в примечаниях Firefox 70 строку, относящуюся к реализации синтаксиса с двумя значениями для свойства CSS display. Или, может быть, вы встретили упоминание о нем во вчерашнем обзоре Firefox 70. Сегодня я объясню, что это значит, и почему понимание этого синтаксиса важно, несмотря на то, что сейчас он реализован только в Firefox.

Свойство display

Свойство display изменяет контекст форматирования элемента и его потомков. В CSS некоторые элементы по умолчанию являются блочными, а другие встроенными. Это одна из первых вещей, которые вы узнаете о CSS.

Свойство display позволяет переключаться между этими состояниями. Например, это означает, что h2, который, обычно является блочным элементом, может отображаться, как встроенный. Или span, изначально встроенный, может отображаться как блочный.

Совсем недавно мы получили CSS Grid Layout и Flexbox. Для доступа к ним мы также используем значения свойства display — display: grid и display: flex. Только при изменении значения display дочерние элементы становятся элементами flex или grid и начинают реагировать на другие свойства из спецификациях grid или flexbox.

Два значения для display — span с display: flex

Однако grid и flexbox демонстрируют, что элемент имеет как внешний, так и внутренний тип отображения. Когда мы используем display: flex, мы создаем элемент уровня блока с дочерними flex-элементами. Потомки описываются как участвующие в контексте flex-форматирования. Вы можете увидеть это, если возьмете span и примените к нему display: flex — span теперь будет блочным элементом. Он ведет себя как элементы уровня блока по отношению к другим блокам в макете. Это, как если бы вы объявили для span display: block, однако мы также получаем измененное поведение потомков. В CodePen ниже вы можете видеть, что строка текста и em стали двумя flex-элементами.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Два значения для display — span с display: grid

Макет сетки ведет себя так же. Если мы используем display: grid, мы создаем элемент уровня блока и контекст форматирования сетки для дочерних элементов. У нас также есть методы для создания встроенного блока с flex или grid потомками с помощью display: inline-flex и display: inline-grid. В следующем примере показан div, обычно блочный элемент, действующий как встроенный элемент с дочерними grid-элементами.

Как встроенный элемент, блок не занимает все пространство строки, и рядом с ним отображается следующая строка текста. Однако потомки все равно являются элементами сетки.

Рефакторинг display

Как показывают вышеприведенные примеры, внешний тип display элемента всегда является block или inline и определяет поведение блока в обычном потоке документа. Внутренний тип display затем изменяет контекст форматирования дочерних элементов.

Чтобы лучше описать это поведение, спецификация CSS Display была реорганизована, чтобы display могло принимать два значения. Первое описывает, является ли внешний тип display block или inline, тогда как второе значение описывает форматирование дочерних элементов. В списке ниже показано, как некоторые из этих новых значений соответствуют единичным значениям, которые теперь называются в спецификации устаревшими значениями (слева — единичное значение, справа — новое значение).

block — block flow

flow-root — block flow-root

inline — inline flow

inline-block — inline flow-root

flex — block flex

inline-flex — inline flex

grid — block grid

inline-grid — inline grid

Есть и другие значения display, включая lists и tables; чтобы увидеть полный набор значений, посетите CSS Display Specification.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Мы можем видеть, как это будет работать для Flexbox. Если я хочу получить блочный элемент с flex дочерними элементами, я использую display: block flex, и если мне нужен встроенный элемент с flex дочерними элементами, я использую display: inline flex. Приведенный ниже пример будет работать в Firefox 70.

Старые добрые display: block и display: inline также не остаются нетронутыми, display: block становится display: block flow — это блочный элемент с потомками расположенными в нормальном потоке. Элемент display: inline становится display: inline flow.

display: inline-block а также display: flow-root

Все это становится более интересным, если мы рассмотрим пару значений display — одно новое и одно, которое относится еще к CSS2. Встроенные блоки в CSS предназначены для размещения внутри строчного блока анонимного блока, который оборачивает каждую строку текста в предложении. Это означает, что они ведут себя определенным образом: если вы добавите отступы ко всем краям встроенного блока, как, например, в приведенном ниже примере, где я присвоила встроенному элементу цвет фона, эти отступы применяются. И, тем не менее, он не сдвигает линейные блоки. Кроме того, встроенные элементы не имеют ширины или высоты (или inline-size и block-size).

Использовав display: inline-block мы заставляет встроенный элемент содержать этот отступ и принимать свойства width и height. И тем не менее элемент остается встроенным; он продолжает размещаться в потоке текста.

В следующем CodePen у меня есть два элемента span, один обычный inline, а другой inline-block, так что вы можете увидеть разницу в компоновке, которую вызывает это значение.

Теперь мы можем рассмотреть новое значение display — flow-root. Если вы задаете для элемента display: flow-root, он становится новым контекстом форматирования блока, становясь корневым элементом для нового нормального потока. По сути, это приводит к созданию плавающих внутренних элементов. Кроме того, поля дочерних элементов остаются внутри контейнера, не сворачиваются с полем родительского элемента.

В следующем CodePen вы можете сравнить первый пример без, display: flow-root со вторым — с display: flow-root. Изображение в первом примере свисает снизу блока, так как оно было выведено из нормального потока. Плавающие элементы извлекаются из потока и сокращают линейные блоки содержимого, следующие за ними. Однако сам блок не содержит элемент, если только этот блок не создает новый контекст форматирования блока.

Во втором примере у нас есть flow-root, и вы можете видеть, что блок с серым фоном теперь содержит float, оставляя зазор под текстом. Если вы когда-либо работали плавающим содержимым, для которого было установлено значение свойства overflow — auto, то вы видите, что мы добились того же, поскольку значения overflow, отличные от visible по умолчанию, создают новый контекст форматирования блока. Однако могут быть некоторые дополнительные нежелательные эффекты, такие как обрезка теней или неожиданные полосы прокрутки. Использование Flow-root предоставляет возможность создать контекст форматирования блока (BFC) без побочных неожиданных эффектов.

Причина по которой я это акцентирую внимание на display: inline-block и display: flow-root заключается в том, что эти две вещи по сути одинаковы. Хорошо известное значение inline-block создает встроенный корневой поток, поэтому новая версия с двумя значениями display: inline-block — это display: inline flow-root. Оно выполняет ту же работу, что и свойство flow-root, которое с двумя значениями становится display: block flow-root.

Вы можете увидеть, как работают оба этих значения в последнем примере, используя Firefox 70.

Можем ли мы использовать эти два свойства значения?

С поддержкой, доступной в настоящее время только в Firefox 70, слишком рано начинать использовать эти свойства с двумя значениями в производстве. В настоящее время другие браузеры не будут их поддерживать. Запрос display: block flex будет считаться недействительным во всех браузерах, за исключением Firefox. Поскольку вы можете получить доступ ко всем функциям, используя синтаксис с одним значением, который останется псевдонимами нового синтаксиса, нет причин внезапно переходить на него.

Тем не менее, этот синтаксис важно знать с точки зрения того, что он значит для CSS. Эти значения правильно объясняют взаимодействие блоков с другими блоками с точки зрения того, являются ли они блочными или встроенными, а также с точки зрения поведения их потомков. Чтобы понять, что делает display, я думаю, они дают очень полезное пояснение. В результате я начала изучать этот синтаксис, использующий эти два значения, чтобы лучше понимать, что происходит, когда вы меняете контексты форматирования.

Всегда интересно видеть, как внедряются новые функции, и я надеюсь, что другие браузеры также вскоре реализуют версии с двумя значениями. И затем, в не столь отдаленном будущем, мы сможем писать CSS точно так же, как мы сейчас его объясняем, четко демонстрируя взаимосвязь между блоками и поведением их потомков.

Автор: Rachel Andrew

Источник: https://hacks.mozilla.org

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

CSS3. Основы

Прямо сейчас изучите CSS3 с нуля!

Смотреть

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

Подробности

Родительская категория: Программирование

Категория: CSS

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

Значения 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-документа правильно и единообразно работают во всех современных браузеров как для настольных компьютеров, так и в мобильных устройствах.

Заберите ссылку на статью к себе, чтобы потом легко её найти 😉

Выберите, то, чем пользуетесь чаще всего:

Спасибо за внимание, оставайтесь на связи! Ниже ссылка на форум и обсуждение ; )

Обсудить эту статью

INFO: Вы отправляете сообщение как ‘Гость’