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


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

Властивість `display`

У 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

Приклади


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

Різні типи блоків

Динамічний приклад

Демонстрація роботи властивості

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів