Полный список значений CSS-свойства display с описанием
При верстке страниц сайта часто существует потребность изменить стиль отображения элемента, для этого в CSS есть свойство display. Оно позволяет превратить строчный элемент в блочный и наоборот, это может пригодиться в разных ситуациях. Кроме того, свойство можно использовать для удаления элемента из страницы или придания элементу других различных свойств. Ниже будет приведен полный список значений свойства display, которые можно использовать для управления стилем показа элемента на странице.
В начале стоит сказать, что все значения сгруппированы по нескольким категориям:
- глобальные значения – группа содержит общие значения;
- display-outside – значения из этой группы определяют внешний тип отображения элемента;
- display-inside - значения определяют внутренний тип отображения элемента;
- display-listitem - значения показывают элемент в виде списка;
- display-internal – группа содержит внутренние значения, которые можно применять к элементам;
- display-box - группа содержит общие значения, которые можно применять к элементам;
- display-legacy – значения из этой группы содержат в себе сразу несколько разных значений.
Итак, какие значения есть у свойства display? Они будут перечислены ниже по группам. Важно помнить, что в настоящее время следует указывать одно значение, хотя последние спецификации и позволяют сочетать некоторые значения, но это пока поддерживается не всеми браузерами. Будет приведен полный список возможных значений с описанием для тех значений, которые наиболее востребованы.
Группа глобальных значений:
Группа display-outside имеет следующие значения:
Группа display-inside имеет следующие значения:
Группа display-listitem имеет главное значение list-item, остальные значения являются возможными комбинациями других значений:
Группа display-internal имеет следующие значения:
Группа display-box имеет следующие значения:
Группа display-legacy имеет следующие значения:
Также существуют значения, входящие сразу в две группы - display-outside и display-inside:
Как видно значений очень много, часть из них совсем новые. Очень часто используются значения none и block. Например, при помощи JavaScript можно управлять показом элемента - скрывать его или показывать при помощи этих двух значений. Также можно заметить частое использование значения table-cell для блоков, оно применяется для того, чтобы сделать вертикальное выравнивание в div при помощи другого свойства - vertical-align: middle. Важно понимать, что браузеры могут поддерживать не все значения свойства display. Наиболее поддерживаемые браузерами значения: block, inline, list-item, none. Поэтому прежде чем использовать данное свойство и выбранное значение, стоит протестировать работу значения во всех популярных браузерах.
Последние статьи
- 09.07.22ИТ / Разное Конвертация офисных файлов DOC, DOCX, DOCM, RTF в форматы DOCX, DOCM, DOC, RTF, PDF, HTML, XML, TXT без потерь и изменения разметки
- 07.07.22ИТ / Безопасность Как защитить исходный код PHP, JS, HTML, CSS - обфускация, минимизация, сжатие и шифрование
- 06.07.22ИТ / Безопасность Подключение не защищено, проблема с Lets Encrypt - как исправить истекший 30.09.2021 DST Root CA X3, удалить его вручную и установить ISRG Root X1. Пример на MS Windows 7
- 08.07.21ИТ / Разное Как бесплатно сделать перевод для сайта без API, перевод документов в Google Translate
- 06.07.21ИТ / Разное Как сделать кнопку подписки на сайте, базу подписчиков и автоматическую рассылку