Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 27.03.2024)
439190
осіб
347
літаків
325
гелікоптерів
6904
танків
13216
ББМ
10931
артилерія
728
ППО
1019
РСЗВ
14539
машин
26
кораблі і катери
Розбираємо властивість display в CSS
Опубліковано Оновлено: 27.01.2024

Розбираємо властивість 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;

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

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

UPDATE: на сьогоднішній день дана модель має гарну специфікацію та велику підтримку сучасними браузерами.

 

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

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься. Обов’язкові поля позначені *