Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 18.11.2022)
83460
осіб
278
літаків
261
гелікоптерів
2879
танків
5808
ББМ
1865
артилерія
209
ППО
393
РСЗВ
4366
машин
16
кораблі і катери
Розбираємо властивість display в 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 дійсно значний. Адже розвиток технологій зумовлює появу і нових методик, і нових підходів до вирішення різних завдань у веб-дизайні. Хоча, з іншого боку, багато методик стають морально застарілими і втрачають свою колишню славу. Сподіваємося, що дана стаття допоможе вам йти в ногу з часом і дозволить більш ефективно вирішувати завдання верстки.

 

 

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

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