html.okpython.net
Основы создания сайтов
CSS :: Свойство display
Еще в курсе изучения языка гипертекстовой разметки HTML мы упоминали о строчных и блочных элементах, а также о свойстве display, которое отвечает за то, как элемент будет отображаться браузером. В частности, узнали, что строчным элементам соответсвует значение inline, а блочным – block. Теперь же, настало время перечислить все значения, принимаемые ненаследуемым свойством display:
- block – элемент будет отображаться как блочный, в результате браузер начнет добавлять разрывы строк до и после элемента, при этом сам элемент будет занимать всю доступную в данной ситуации шириную, а высота элемента будет формироваться его содержимым;
- inline – элемент будет отображаться как строчный, в результате браузер будет считать его частью строки, а ширина элемента будет формироваться его содержимым;
- run-in – элемент будет вести себя как блочный или строчный в зависимости от контекста;
- inline-block – элемент будет вести себя в общем потоке как строчный с тем отличием, что к нему можно будет применять свойства блочных элементов, например, можно будет задавать отступы и размеры;
- inline-table – элемент будет вести себя в общем потоке как строчный с тем отличием, что к нему можно будет применять свойства элемента «table», т.е. значение предназначено для изменения формата обтекания таблицы соседними элементами;
- table – элемент будет отображаться как таблица;
- table-caption – элемент будет отображаться как заголовок таблицы;
- table-cell – элемент будет отображаться как ячейка таблицы;
- table-row – элемент будет отображаться как строка таблицы;
- table-column – элемент будет отображаться как колонка таблицы, как будто он является элементом «col»;
- table-column-group – элемент будет отображаться как группа колонок таблицы, как будто он является элементом «colgroup»;
- table-header-group – элемент будет отображаться как заголовочная часть таблицы, как будто он является элементом «thead»;
- table-row-group – элемент будет отображаться как группа строк таблицы, как будто он является элементом «tbody»;
- table-footer-group – элемент будет отображаться как нижняя часть таблицы, как будто он является элементом «tfoot»;
- list-item – элемент будет отображаться как блочный, а перед его содержимым будет добавлен маркер списка;
- none – элемент удаляется из общего потока, а все элементы ведут себя так, как-будто он отсутствует не только на странице, но и в исходном коде.
Использование некоторых значений свойства display показано в примере №1.
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Свойство display</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. Использование значений свойства display
Кстати, не забываем про универсальное значение inherit, которое указывает, что для элемента наследуется значение аналогичного свойства родительского элемента.
Быстрый переход к другим страницам
- Анимация в CSS
- Свойство display
- Позиционирование элементов
- Вернуться к оглавлению учебника