Categories: CSS

Розбираємо властивість display в CSS

Властивість display є однією з найбільш важливих властивостей CSS, які використовуються верстальниками для побудови макету. Найпопулярнішими значеннями цієї властивості є block, inline та none. Значення table та inline-block також досить поширені. Але крім цих значень є ще маса інших, які можна і потрібно використовувати, і про які ви, можливо, не знали. Тому, цей пост присвячений розгляду різних значень властивості display в CSS-стилях.

Перш ніж ми поговоримо про властивість display, ми повинні згадати «дерево блоків» (box tree).

CSS бере вихідний документ, організований як дерево елементів та текстових вузлів, і відображає його на полотно (наприклад, екран монітора). Для цього він створює проміжну структуру, дерево блоків, яка представляє собою структуру форматування для готового (візуалізованого) документу. Кожен блок в дереві блоків відповідає відповідному елементу в просторі і/або часі на полотні.

Щоб створити дерево блоків, CSS спочатку використовує каскадування і успадкування, щоб призначити обчислене значення для кожної властивості CSS кожному елементу у вихідному дереві. Потім для кожного елемента CSS генерує нуль або більше блоків, як зазначено у властивості display цього елемента. Іншими словами, властивість display визначає тип відображення кожного блоку в дереві блоків.

Всі елементи мають значення display за замовчуванням, але його можна перевизначити, явно встановивши значення display на щось інше. Значення за замовчуванням в XML (а також для елементів SVG) є inline. А в HTML значення властивостей display за замовчуванням беруться з поведінки, описаної в специфікаціях HTML, або з таблиці стилів за замовчуванням для браузера/користувача.

Основні значення властивості display в CSS

display: block;

Елемент генерує «коробку» блочного рівня. Всі елементи на цьому рівні починаються з нового рядка (вертикально) і, якщо не вказано інше, розтягуються до всієї ширини свого контейнера. Елементи прилягають впритул один до одного, якщо для них не задані відступи (margin).

display: none;

Видаляє елемент і його дочірні елементи зі звичайного потоку документа. Документ відображається так, як ніби цього елемента ніколи не було, а займане ним місце не резервується. Зчитувачі екрану також ігнорують вміст такого елемента.

display: inline;

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

display: list-item;

Елемент, що відображається як елемент списку, поводиться точно так само, як елемент блочного рівня, але додатково створює поле для маркера. Тільки елементи <li> мають значення за замовчуванням для елемента списку (list-item). Значення зазвичай використовується для повернення елементів <li> до їх дефолтної поведінки.

display: inline-block;

Елемент генерує «коробку» блочного рівня, але весь блок веде себе як вбудований (інлайновий) елемент. Тобто, він «обтікається» іншими елементами веб-сторінки.

Табличний рівень

Існує багато значень display, які дозволяють елементам поводитися так само, як і HTML таблицям. У таблиці нижче представлені значення «табличного рівня» та їх короткий опис.

table Співвідноситься з <table> HTML елементом. Визначає «коробку» блочного рівня.
table-header-group Співвідноситься з <thead> HTML елементом.
table-row Співвідноситься з <tr> HTML елементом.
table-cell Співвідноситься з <td> HTML елементом.
table-row-group Співвідноситься з <tbody> HTML елементом.
table-footer-group Співвідноситься з <tfoot> HTML елементом.
table-column-group Співвідноситься з <colgroup> HTML елементом.
table-column Співвідноситься з <col> HTML елементом.
table-caption Співвідноситься з <caption> HTML елементом.
inline-table Це єдине значення, яке не має прямого зіставлення з HTML елементом. Елемент буде вести себе як елемент HTML таблиці, але як інлайновий блок, а не як елемент блочного рівня.

Хоча табличні макети використовуються рідко, вони бувають дуже корисними в деяких випадках. Наприклад, якщо ви хочете відображати таблицю лише на широких екранах, а для менших екранів тільки зберегти її підтримку. Цього можна досягти за допомогою поєднання медіа-запитів і властивості display.

Більш сучасні значення

Спосіб відображення контенту на веб-сторінці досить сильно змінився з моменту появи HTML. Коли веб-дизайнери хотіли створити якийсь креативний макет, першим використовуваним методом було вкладення HTML-таблиць (табличні макети).

А коли CSS ставав все більш популярним, верстальники перейшли до плаваючих макетів, розміщуючи контент в різних плаваючих div, щоб домогтися бажаного ефекту. Така техніка досі дуже поширена, але після появи flexbox (макета гнучкої «коробки» в CSS), ця ситуація буде тривати все менше. Коли макет гнучкої «коробки» буде повністю підтримуватися всіма браузерами, гнучкі макети стануть переважаючим методом верстки. Проте, не всі браузери підтримують специфікацію flexbox, і це сильно гальмує її розвиток.

Модель flexbox дуже ефективна, і оскільки вона може багато чого зробити, необхідні деякі зусилля, щоб повністю зрозуміти, як вона працює і як її використовувати. Для глибокого вивчення цієї моделі потрібні окремі великі статті, а сьогодні ми розглянемо лише ази.

display: flex;

Оголошуючи display: flex; для елемента, він стає flex (гнучким) контейнером, а його дочірні елементи стають гнучкими елементами цього контейнера. Властивості flex не поширюються на онуків цього елемента. Як гнучкий контейнер, так і гнучкі елементи мають свої власні гнучкі властивості.

display: grid;

Елемент поводиться як блоковий і відображає вміст відповідно до моделі сітки. Модель сітки дає нам спосіб створення системи сіток і дозволяє контролювати позиціонування елементів сітки виключно за допомогою CSS, без залучення HTML. При використанні разом з медіа-запитами сітка CSS стає потужним інструментом, коли справа доходить до проектування і побудови гнучких макетів.

Зверніть увагу, що CSS-сітка офіційно не реалізована в жодному браузері. Щоб підтримувати її, браузерам потрібно вказувати префікси постачальників і встановлювати прапорці.

Експериментальні значення (не повинні використовуватися в робочому коді)

display: run-in;

Теоретично, якщо ви встановлюєте властивість display елементу в run-in, він відображається як блок всередині іншого блоку. Варіант використання цієї властивості полягає в тому, щоб мати власний метод для створення заголовків, які візуально розташовуються в тому ж рядку, що і наступний контент.

Для цієї мети можна було б використовувати і float, але тут мається на увазі, що значення автоматично вписується в рядок і вирівнюється по базовій лінії.

Зверніть увагу, що це значення підтримується тільки в Internet Explorer 11 і Opera Mini.

display: ruby;

Елемент поводиться як інлайновий і видає свій вміст відповідно до моделі форматування елемента <ruby> HTML. Якщо коротко, то це дозволяє відображати анотації поруч з базовою лінією тексту (зазвичай для допомоги в вимові). Така техніка досить поширена в китайській і японській мовах.

display: contents;

Суть цього значення полягає в тому, що коли ви його використовуєте для елемента, він зникає з DOM, але всі його нащадки залишаються і займають своє місце. Ця специфікація на даний момент підтримується тільки в Firefox >59, Chrome >65, Safari 11.1.

Короткий підсумок

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

Tags: CSS3

Recent Posts

Як вивчити німецьку мову легко і весело? З допомогою Beste Freunde!

Німецька часто вважається складною мовою. Так, німецька лексика має «важкий» характер. Так, є дійсно дуже… Read More

27/09/2020

Опалення і гаряча вода коли треба, а не коли включать

Тепло в домі і гаряча вода в будь-який час для багатьох мешканців багатоквартирних та приватних… Read More

19/09/2020

Інструкція по завантаженню відео з сервісу TikTok (безкоштовно та без watermark)

Якщо ви ще не чули про TikTok, тоді рекомендуємо вам спочатку ознайомитися з цим коротким… Read More

17/09/2020

Що є в бюджетному ноутбуці – на які характеристики розраховувати?

Пройшли ті часи, коли пристойний ноутбук коштував від 1000 доларів. Сьогодні можна купити досить непоганий… Read More

16/09/2020

Що краще: цифрове телебачення Т2 чи інтернет-телебачення

Сучасне життя неможливо уявити без телебачення. Воно дозволяє дізнаватися про події в Україні та світі,… Read More

02/09/2020

Гіпоалергенна подушка. Чому вона важлива?

Зараз знайдеться мало людей, в яких немає алергії на продукти або пилок рослин. Вважається, що… Read More

28/08/2020