html.okpython.net
Основы создания сайтов
CSS :: Свойство display
css-свойство display (от англ. display – отображение) устанавливает тип элемента, тем самым определяя, как элемент будет отображаться браузером в документе.
Характеристики
- Значение по умолчанию: inline.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.display="value".
Синтаксис
display: block | inline | inline-block | inline-table | inline-flex | flex | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group
Значения
- block – элемент будет отображаться как блочный, в результате браузер начнет добавлять разрывы строк до и после элемента, при этом сам элемент будет занимать всю доступную в данной ситуации шириную, а высота элемента будет формироваться его содержимым.
- inline – элемент будет отображаться как строчный, в результате браузер будет считать его частью строки, а ширина элемента будет формироваться его содержимым.
- inline-block – элемент будет вести себя в общем потоке как строчный с тем отличием, что к нему можно будет применять свойства блочных элементов, например, можно будет задавать отступы и размеры.
- inline-table – элемент будет вести себя в общем потоке как строчный с тем отличием, что к нему можно будет применять свойства элемента «table», т.е. значение предназначено для изменения формата обтекания таблицы соседними элементами.
- inline-flex – элемент будет вести себя в общем потоке как строчный флекс-элемент.
- flex – элемент будет вести себя в общем потоке как блочный флекс-элемент.
- list-item – элемент будет отображаться как блочный, а перед его содержимым будет добавлен маркер списка.
- none – элемент удаляется из общего потока, а все элементы ведут себя так, как-будто он отсутствует не только на странице, но и в исходном коде.
- run-in – элемент будет вести себя как блочный или строчный в зависимости от контекста.
- table – элемент будет отображаться как таблица.
- table-caption – элемент будет отображаться как заголовок таблицы.
- table-cell – элемент будет отображаться как ячейка таблицы.
- table-column – элемент будет отображаться как колонка таблицы, как будто он является элементом «col».
- table-column-group – элемент будет отображаться как группа колонок таблицы, как будто он является элементом «colgroup».
- table-footer-group – элемент будет отображаться как нижняя часть таблицы, как будто он является элементом «tfoot».
- table-header-group – элемент будет отображаться как заголовочная часть таблицы, как будто он является элементом «thead».
- table-row – элемент будет отображаться как строка таблицы.
- table-row-group – элемент будет отображаться как группа строк таблицы, как будто он является элементом «tbody».
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css2/visuren.html#propdef-display
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/display
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div, span{ color: green; border: solid 2px blue; width: 200px; } </style> </head> <body> <span> По умолчанию элемент «span» является строчным элементом. </span> <div> По умолчанию элемент «div» является блочным элементом. </div><br> <div style="display: inline"> Теперь элемент «div» стал строчным элементом и его ширина определяется содержимым. </div><br><br> <span style="display: block"> Теперь элемент «span» стал блочным элементом. </span><br> <div style="display: inline">Первый строчный «div».</div> <div style="display: inline-block">inline-block «div»</div> <div style="display: inline">Второй строчный «div».</div> </body> </html>
Пример №1
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> .div_normal{ width: 400px; height: 300px; margin: auto; margin-top: 20px; padding: 0px; background-color: #DFDFDF; border-radius: 5px; } /* Создаем блочный флекс-контейнер */ .div_flex{ display: flex; width: 400px; height: 300px; margin: auto; margin-top: 5em; padding: 0px; background-color: #DFDFDF; border-radius: 5px; } p, span{ width: 100px; background-color: #55aa55; border-radius: 5px; text-align: center; font-weight: bold; color: #F9F9F9; } </style> </head> <body> <!-- По умолчанию display: block --> <div class="div_normal"> <p>1</p><span>2</span><p>3</p><span>4</span> <p>5</p><span>6</span><p>7</p><span>8</span> </div> <!-- А здесь мы имеем дело с флекс-контейнером --> <div class="div_flex"> <p>1</p><span>2</span><p>3</p><span>4</span> <p>5</p><span>6</span><p>7</p><span>8</span> </div> </body> </html>
Пример №2