CSS display
Базовая линия Широко доступна
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.
Модуль CSS display определяет, как дерево форматирования CSS генерируется из дерева элементов документа, и определяет свойства, контролирующие его.
Справочник
Свойства
Типы данных
Руководства
- Использование многословного синтаксиса с CSS display
-
Описывает многословный синтаксис и сравнивает его с устаревшими однословными значениями.
Расположение потока (display: block, display: inline)
Гибкое расположение элементов
Сетка
- Основные понятия сетки
- Взаимосвязь сетки с другими методами компоновки
- Размещение на основе линий
- Области сетки
- Расположение с именованными линиями сетки
- Автоматическое размещение в сетке
- Выравнивание элементов в сетке
- Сетки, логические значения и режимы написания
- Сетка и доступность
- Сетка и поэтапное улучшение
- Создание общих макетов с помощью сеток
Спецификации
Совместимость браузеров
| Рабочий стол | Мобильное устройство | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
CSS_display |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 |
|---|---|---|---|---|---|---|---|---|---|---|---|
block |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 |
contents |
65 | 79 | 37 | 52 | 11.1 | 65 | 37 | 47 | 11.3 | 9.0 | 65 |
flex |
2921 | 12 | 20Firefox 28 added multi-line flexbox support. |
161512.1–15 | 97 | 2925 | 20Firefox 28 added multi-line flexbox support. |
161412.1–14 | 97 | 2.01.5 | 4.44.4 |
flow-root |
58 | 79 | 53 | 45 | 13 | 58 | 53 | 43 | 13 | 7.0 | 58 |
grid |
57 | 1612 | 52 | 44 | 10.1 | 57 | 52 | 43 | 10.3 | 6.0Samsung Internet added this earlier than the corresponding Chrome version would indicate. |
57 |
inline |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 10.1 | 1 | 1.0 | 4.4 |
inline-block |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
inline-flex |
2921 | 12 | 20Firefox 28 added multi-line flexbox support. |
1615 | 97 | 2925 | 20Firefox 28 added multi-line flexbox support. |
1614 | 97 | 2.01.5 | 4.44.4 |
inline-grid |
57 | 1612 | 52 | 44 | 10.1 | 57 | 52 | 43 | 10.3 | 6.0Samsung Internet added this earlier than the corresponding Chrome version would indicate. |
57 |
inline-table |
1 | 12 | 3 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
is_transitionable |
117 | 117 | Нет | 103 | 18 | 117 | Нет | 78 | 18 | 24.0 | 117 |
keyframe_animatable |
116 | 116 | Нет | 102 | 18 | 116 | Нет | 78 | 18 | 24.0 | 116 |
list-item |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
math |
109 | 109 | Нет | 95 | Нет | 109 | Нет | 74 | Нет | 21.0 | 109 |
multi-keyword_values |
115 | 115 | 70 | 101 | 15 | 115 | 79 | 77 | 15 | 23.0 | 115 |
none |
1Chrome 65 stopped creating layout objects for elements inside an<iframe> with display:none applied. |
12 | 1 | 7Opera 52 stopped creating layout objects for elements inside an<iframe> with display:none applied. |
1 | 18Chrome 65 stopped creating layout objects for elements inside an<iframe> with display:none applied. |
4 | 10.1Opera Android 47 stopped creating layout objects for elements inside an<iframe> with display:none applied. |
1 | 1.0Chrome 65 stopped creating layout objects for elements inside an<iframe> with display:none applied. |
4.4Chrome 65 stopped creating layout objects for elements inside an<iframe> with display:none applied. |
ruby |
121 | 12–79 | 38 | 107 | Нет | 121 | 38 | 81 | Нет | 25.0 | 121 |
ruby-base |
Нет | 12–79 | 38 | Нет | Нет | Нет | 38 | Нет | Нет | Нет | Нет |
ruby-base-container |
Нет | 12–79 | 38 | Нет | Нет | Нет | 38 | Нет | Нет | Нет | Нет |
ruby-text |
121 | 12–79 | 38 | 107 | Нет | 121 | 38 | 81 | Нет | 25.0 | 121 |
ruby-text-container |
Нет | 12–79 | 38 | Нет | Нет | Нет | 38 | Нет | Нет | Нет | Нет |
table |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
table-caption |
≤80 | 80 | ≤72 | 67 | ≤13.1 | 80 | 79 | 57 | ≤13.4 | 13.0 | 80 |
|---|---|---|---|---|---|---|---|---|---|---|---|
table-cell |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
table-column |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
table-column-group |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
table-footer-group |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
table-header-group |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
table-row |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
table-row-group |
1 | 12 | 1 | 7 | 1 | 18 | 4 | 14 | 1 | 1.0 | 4.4 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display
