Кожен елемент веб-сторінки - це прямокутна рамка. Властивість display у CSS визначає, як саме поводитиметься це прямокутне поле. Існує лише декілька загальновживаних значень:
div ( display: inline; /* Default of all elements, unless UA stylesheet overrides */ display: inline-block; /* Characteristics of block, but sits on a line */ display: block; /* UA stylesheet makes things like and block */ display: run-in; /* Not particularly well supported or common */ display: none; /* Hide */ )
Значення за замовчуванням для всіх елементів - вбудоване. Більшість «Таблиць стилів агента користувача» (стилі за замовчуванням, які браузер застосовує до всіх сайтів) скидають багато елементів на «блокування». Давайте розглянемо кожну з них, а потім висвітлимо деякі інші менш поширені цінності.
В лінію
Значення за замовчуванням для елементів. Подумайте про такі елементи, як , або і як обтікання текстом у ці елементи в рядку тексту не порушує потік тексту.
Елемент має 1px червоної облямівки. Зверніть увагу, що він сидить прямо в рядку з рештою тексту.
Вбудований елемент приймає поля та відступи, але елемент все одно сидить вбудованим, як ви могли очікувати. Поле та заповнення відштовхують інші елементи лише по горизонталі, а не вертикально.
Вбудований елемент не приймає heightі width. Це буде просто ігнорувати це.
Вбудований блок
Елемент, встановлений у inline-block, дуже схожий на вбудований, оскільки він буде вбудований в природний потік тексту (на "базовій лінії"). Різниця полягає в тому, що ви можете встановити widthі heightякі будуть дотримуватися.
Блок
Для blockтаблиці стилів браузера UA задано ряд елементів . Вони , як правило , є контейнерними елементами, як , і
. Також напишіть "блоки", наприклад
і
. Елементи рівня блоку не сидять в рядку, а пробиваються повз них. За замовчуванням (без встановлення ширини) вони займають якомога більше горизонтального простору.
Два елементи з червоними каймами є
s, які є елементами рівня блоку. Елемент між ними не сидить рядний , так як блоки ламаються нижче попередньо записаних файлів.
Обкатка
По-перше, ця властивість не працює у Firefox. Подейкують, що специфікація для нього недостатньо чітко визначена. Однак, щоб почати це розуміти, все одно, що якщо ви хочете, щоб елемент заголовка знаходився в одному рядку з текстом під ним. Плаваючи це не буде працювати, як і щось інше, оскільки ви не хочете, щоб заголовок був дочірнім елементом тексту під ним, ви хочете, щоб це був його власний незалежний елемент. У "підтримуючих" браузерах це так:
Однак не розраховуйте на це.
Flexbox
displayВластивість також використовується для нових методів новомодного макета як Flexbox.
.header ( display: flex; )
Існують деякі старіші версії синтаксису flexbox, тому, будь ласка, ознайомтесь із цією статтею щодо синтаксису використання flexbox із найкращою підтримкою браузера. Обов’язково перегляньте цей повний посібник із Flexbox.
Потік-корінь
flow-rootЗначення дисплея створює новий «контекст форматування блоку», але в іншому , як block. Новий BFC допомагає в таких речах, як очищення поплавків, усуваючи необхідність хакерів для цього.
.group ( display: flow-root; )
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
Chrome
Firefox
IE
Край
Сафарі
58
53
Ні
79
13
Мобільний / планшетний
Android Chrome
Android Firefox
Android
iOS Safari
88
85
81
13,0-13,1
Сітка
Макет сітки також спочатку встановлюється властивістю відображення.
body ( display: grid; )
Ось наш посібник із розмітки сітки, який включає таблицю підтримки браузера.
Жоден
Повністю видаляє елемент зі сторінки. Зверніть увагу, що, поки елемент все ще знаходиться в DOM, його видаляють візуально та будь-яким іншим можливим способом (ви не можете перейти на вкладку до нього чи його дочірніх елементів, він ігнорується програмами зчитування з екрана тощо).
Значення таблиці
Існує цілий набір відображуваних значень, які змушують нетабличні елементи поводитися як елементи таблиці, якщо це потрібно. Це рідко, але іноді дозволяє вам бути «більш семантичними» з кодом, використовуючи унікальні можливості позиціонування таблиць.
