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

CSS свойство display

Определяет, как элемент должен быть показан в документе (тип его отображения)

CSS синтаксис

display: значение;

Возможные значения

Значение	Описание
inline	Элемент отображается как встроенный (подобно <span>).
block	Элемент отображается как блоковый (подобно <div>).
flex	Элемент отображается как flex-контейнер блочного уровня (гибкий контейнер). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3.
inline-block	Генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-flex	Элемент отображается как flex-контейнер встроенного уровня (гибкий элемент). Может использоваться в создании гибкой верстки страницы по модели FlexBox. Добавлено в CSS3.
inline-table	Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и обтекается другими элементами.
list-item	Элемент ведет себя подобно элементу <li>.
run-in	Генерирует либо встроенный, либо блочный элемент в зависимости от контекста.
table	Элемент ведет себя подобно элементу <table>.
table-caption	Элемент ведет себя подобно элементу <caption>.
table-column-group	Элемент ведет себя подобно элементу <colgroup>.
table-header-group	Элемент ведет себя подобно элементу <thead>.
table-footer-group	Элемент ведет себя подобно элементу <tfooter>.
table-row-group	Элемент ведет себя подобно элементу <tbody>.
table-cell	Элемент ведет себя подобно элементу <td>.
table-column	Элемент ведет себя подобно элементу <col>.
table-row	Элемент ведет себя подобно элементу <tr>.
none	Элемент не отображается (и не имеет никакого воздействия на верстку страницы).
inherit	Значение наследуется от родительского элемента.
initial	Устанавливает значение по умолчанию.

Совместимость: Полностью поддерживаются всеми браузерами только значения block, inline, list-item и none. Значения inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row и table-row-group не поддерживаются IE7 и более ранними версиями. В IE8 требуется декларация

!DOCTYPE. IE9 поддерживает все значения. В Safari для значений flex и inline-flex требуется указывать префикс, например, «display: -webkit-flex» и «display: -webkit-inline-flex;«.

Пример использования

Отображаем параграф, как встроенный элемент

p.inline {
     display: inline;
}

css властивість display

• Головна
• css
• властивості
• display

---

Властивість display вказує тип блока, який використовується для HTML-елемента.

У HTML тип блоку без задання виставляється браузером згідно із актуальною версією специфікації або його налаштувань. У XML значенням без задання для всіх елементів є inline.

Додатково до різних типу блоків, існує значення none, яке приховує елемент зі сторінки та прибирає його з потоку — так ніби його і не було.

Властивість display задається з використанням значень ключових слів. Значення ключових слів згруповані за шістьма категоріями:

• <display-outside>
• <display-inside>
• <display-listitem>
• <display-internal>
• <display-box>
• <display-legacy>

Зараз рекомендується задавати для властивості по одному ключовому слову, але у пізніших версіях специфікацій допускається можливість використання одночасно декількох значень для display. Але вона поки що не підтримується всіма браузерами.

Нотатка:	Значення inline-table, table, table-caption, table-cell, table-column, table-column-group, table-row та table-row-group не підтримуються в IE7 і більш ранніх версіях. IE8 вимагає !DOCTYPE. IE9 підтримує вже ці значення.
Нотатка:	Значення flex і inline-flex вимагає префікс для роботи в Safari. Для flex використовуйте display: -webkit-flex, для inline-flex використовуйте display: -webkit-inline-flex;

Запропонувати свою пораду чи нотатку

ПорадаНотатка

Синтакс

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

Властивість display може отримувати 20 значень:

block

Елемент показується як блоковий. Вказавши це значення для елемента <span> — він почне вести себе як блоковий, тобто, його вміст буде завжди починатися з нового рядка.

inline

Елемент відображається як рядковий (<span>). Значення inline скасовує особливість блокових елементів завжди починатися з нового рядка.

inline-block

Це значення створює блоковий елемент, який поводить себе подібно рядковому елементу. Його внутрішня частина форматується як у блокового елемента, а сам елемент — як рядковий. Так себе поводить елемент

<img>.

inline-table

Визначає, що елемент є таблицею <table> , але при цьому таблиця поводить себе як рядковий елемент і обтікається іншими елементами.

inline-flex

Елемент поводиться як рядковий і викладає вміст згідно флекс-моделі. З’явився тільки у CSS3.

flex

Елемент поводиться як блоковий і викладає вміст згідно флекс-моделі

list-item

Елемент поводить себе так само як елемент <li>.

none

Приховує елемент. Макет формується, немов елемента і не було. Зробити видимим елемент можна за допомогою скриптів. При цьому відбувається переформатування даних на сторінці з урахуванням знову доданого елемента.

run-in

Встановлює елемент як блоковий або рядковий залежно від контексту.

table

Надає елементу елементу якостей таблиці <table>.

table-caption

Задає заголовок таблиці подібно застосуванню <caption>

table-cell

Вказує, що елемент являє собою елемент таблиці (<td> або <th>)

table-column-group

Елемент поводить себе ніби він елемент <colgroup>.

table-column

Елемент поводить себе ніби він елемент <col>.

table-footer-group

Використовується для зберігання однієї або декількох рядків комірок, які відображаються в самому низу таблиці. За своєю дією схожий з роботою <tfoot>

table-header-group

Елемент призначений для зберігання одного чи кількох рядків комірок, які представлені у верхній частині сторінки. За своєю дією схожий з роботою <thead>

table-row

Елемент відображається як рядок таблиці <tr>

table-row-group

Елемент аналогічний дії елемента <tbody>.

initial

Встановлює властивість у значення без задання

inherit

Вказує на спадковість властивості від свого батьківського елемента

Значення без задання:	inline
Наслідує:	Ні
Анімується:	Так
JavaScript синтаксис:	object. style.display=»none»

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Переглядач
none, inline, block	1.0	4.0	1.0	1.0	7.0	12.0
inline-block	1.0	5.5	3.0	1. 0	7.0	12.0
inline-flex, flex	29.0	11.0	28.0	9.0	17.0	12.0
list-item	1.0	6.0	1.0	1.0	7.0	12.0
run-in	1.0	8.0	Не підтримується	1. 0	7.0	12.0
inline-table	1.0	8.0	3.0	1.0	7.0	12.0
table-*	1.0	8.0	1.0	1.0	7.0	12.0

Переглядач
none, inline, block	1. 0	1.0	1.0
inline-block	1.0	1.0	1.0
inline-flex, flex	4.4	28.0	9.2
list-item	1.0	1.0	1.0
run-in	1.0	Не підтримується	1.0
inline-table	1. 0	1.0	1.0
table-*	1.0	1.0	1.0

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4

Демонстрація роботи різних значень властивості display

Різні типи блоків
Динамічний приклад
Демонстрація роботи властивості
 
Додаткові посилання
position
box-shadow
clear
z-index
right
float
opacity
visibility
vertical-align
unicode-bidi
top
clip
bottom
all
left
 Дисплей | HTML Dog 
  
 Ключевой прием в манипулировании HTML-элементами заключается в понимании того, что в том, как работает большинство из них, нет ничего особенного.  Большинство страниц можно составить всего из нескольких тегов, которые можно стилизовать по своему усмотрению. Визуальное представление браузера по умолчанию для большинства HTML-элементов состоит из различных стилей шрифта, полей, отступов и, по сути,  типов отображения  . 
 
 Самые основные типы дисплеев  встроенные  ,  block  и  none , и ими можно манипулировать с помощью свойства  display  и шокирующих значений  inline  ,  block  и  none  . 
  
 Встроенный 
 
 
  встроенный  делает именно то, что говорит — блоки, которые отображаются встроенными, следуют за потоком строки. Якорь (ссылки) и выделение являются примерами элементов, которые по умолчанию отображаются встроенными. 

    Встроенные коробки. 
 Следующий код, например, приведет к тому, что все элементы списка в списке будут отображаться рядом друг с другом в одной непрерывной строке, а не в отдельной строке: 
 
li {  дисплей: встроенный  }
 
  Реклама здесь!  На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.
 Блок 
  Блок  делает блок автономным, подходящим по всей ширине содержащего его блока, с эффективным разрывом строки до и после него. В отличие от встроенных блоков, блочные блоки позволяют лучше манипулировать высотой, полями и отступами. Элементы заголовка и абзаца являются примерами элементов, которые по умолчанию отображаются в браузерах таким образом.
 Блочные ящики.
 В следующем примере все ссылки в «nav» будут сделаны большими интерактивными блоками:
#навигация {
      дисплей: блок; 
    отступ: 20 пикселей 10 пикселей;
}
 
  display: inline-block  оставит поле встроенным, но обеспечит большую гибкость форматирования блочных блоков, позволяя, например, поля справа и слева от поля.
 Нет 
  нет  , ну, вообще не отображает поле, что может показаться довольно бесполезным, но может быть использовано для хорошего эффекта с динамическими эффектами, такими как включение и выключение расширенной информации по щелчку ссылки, или в качестве альтернативы таблицы стилей.
 Например, следующий код можно использовать в таблице стилей для печати, чтобы фактически «отключить» отображение таких элементов, как навигация, которые в этой ситуации были бы бесполезны:
#navigation, #related_links {  display: none  }
 
  отображение: нет  и  видимость: скрыто  различаются тем, что отображение : нет  полностью выводит блок элемента из игры, тогда как  видимость: скрыто  удерживает блок и его поток на месте без визуального представления его содержимого. Например, если второй абзац из 3 был установлен на  display: none  , первый абзац будет переходить прямо в третий, тогда как если бы он был установлен на  visibility: hidden  , на месте абзаца был бы пробел.
 Столы 
 ОК. Итак, это были основы. Теперь о чем-то более продвинутом и редко используемом…
 Возможно, лучший способ понять связанные с таблицами значения свойств  display  — это подумать о HTML-таблицах.  таблица  является начальным дисплеем, и вы можете имитировать  tr  и  td  элементы со значениями свойства  table-row  и  table-cell  соответственно.
 Свойство  display  идет дальше, предлагая  table-column  ,  table-row-group  ,  table-column-group  ,  table-header-group  ,  table-footer-group  и table3. -caption  как значения, которые говорят сами за себя. Сразу очевидным преимуществом этих значений является то, что вы можете построить таблицу по столбцам, а не по строкам, как в HTML.
 Наконец, значение  inline-table  в основном задает таблицу без разрывов строк до и после нее.
 Будьте осторожны при использовании этих значений. Старые браузеры борются с ними, и увлечение таблицами CSS может серьезно повредить вашей доступности. HTML следует использовать для передачи смысла, поэтому, если у вас есть табличные данные, их следует упорядочить в HTML-таблицах. Использование исключительно таблиц CSS может привести к мешанине данных, которые совершенно нечитаемы без CSS. Плохо. И не в стиле Майкла Джексона.
 Другие типы дисплеев 
  элемент списка  отображает поле так, как вы обычно ожидаете отображения HTML-элемента  li . Для правильной работы элементы, отображаемые таким образом, должны быть вложены в элемент  ul  или  ol .
  run-in  делает блок либо встроенным, либо блочным в зависимости от отображения его родителя.
 Свойство отображения 
 Свойство  display  определяет базовое поведение макета элемента. Большинство элементов имеют значение по умолчанию либо  блок  или  встроенный  .
 Блок 
 Поведение блока заставляет элементы располагаться один под другим. Думайте об этом как о перевернутой гравитации: элементы падают вверх страницы и приземляются ниже того, что было раньше. Они также растягиваются по горизонтали, чтобы заполнить все доступное пространство в контейнере.
  Обратите внимание, что в этом примере между элементами div добавлено пространство, чтобы их было легче увидеть. 
 Заголовки, абзацы, разделы div и многие другие элементы по умолчанию ведут себя как блоки.
 Обратите внимание, что хотя ни один из элементов в приведенном выше примере не содержит достаточно текста, чтобы заполнить все доступное горизонтальное пространство, каждый из них окружен невидимой рамкой, которая простирается до правого края контейнера. Мы можем сделать это поле видимым, добавив цвет фона.
  Обратите внимание, что в этом примере пространство между элементами определяется по умолчанию браузером для этих элементов. 
 Встроенный 
 Встроенное поведение приводит к тому, что элементы располагаются в горизонтальной строке слева направо, как слова в абзаце. И точно так же, как текст, они переносятся на новую строку, когда им не хватает места.
 Строковые элементы также ведут себя как слова, если  помещаются в  текстовую строку, например элемент  strong  в следующем примере:
 Встроенный блок 
 Мы сталкиваемся с проблемами, когда пытаемся применить вертикальные (верхние и нижние) отступы, поля или границы к  встроенным  элементам. Чтобы сохранить положение текста в строке, эти свойства не влияют на положение элемента:
 Мы могли бы использовать  display: block;  , но это приведет к тому, что элемент будет растягиваться горизонтально по всему контейнеру:
 Вместо этого мы можем использовать гибридный дисплей : встроенный блок;  , который сохраняет ограниченную ширину и размещается в горизонтальной строке, как текст, но учитывает вертикальные отступы, поля и границы:
 Приведенный выше пример вряд ли будет распространенным сценарием использования  inline-block  , но он может пригодиться по разным причинам, например, когда ссылки выглядят как кнопки:
 Что произойдет в приведенном выше примере, если вы измените значение  display  на  inline  ? Что, если вы измените его на  блок ? Это хорошая демонстрация различий между ними.