display

Краткая информация

Значение по умолчанию	inline
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visuren.html#display-prop

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе. Свойство display применяется для изменения расположения элементов находящихся в коробке дисплея. Благодаря большому количеству дополнительных значений, последовательность расположения элементов может быть самой разной. Свойство применимо ко всем элементам, создано в версии CSS1 и проходит валидацию согласно версии CSS3.

Синтаксис

Значения

Список возможных значений этого свойства, понимаемый разными браузерами очень короткий — block, inline, list-item и none. Другие значения приведены в таблице.

Дополнительные значения display

Значение	Описание
block	Элементы выстраиваются как блочные, занимая всю ширину внутри родителя, создавая разрыв и перенос строки. При таком значении строчные элементы начинают вести себя как блочные.
inline	Элементы выстраиваются как строчные, ориентируясь на соседство блочных моделей, не создавая разрыва и переноса строки
inline-block	Элементы выстраиваются как строчные, при этом форматирующие значения элементу, добавляются как к блочному
list-item	Элементы выстраиваются как элементы со свойствами списка, становясь блочным элементом к которому прикрепляются маркеры
inline-table	Элементы выстраиваются как таблица со свойствами строчного элемента
run-in	Элементы выстраиваются как блочные, но наследуя свойства строчных элементов
table	Элементы выстраиваются как таблица, аналогично тегу table
table-caption	Элементы выстраиваются как заголовки таблицы,аналогично тегу caption
table-cell	Элементы выстраиваются как ячейки таблицы,аналогично тегу td
table-column	Элементы выстраиваются как столбцы таблицы, аналогично тегу col
table-column-group	Элементы выстраиваются как группа столбцов таблицы, аналогично тегу colgroup
table-footer-group	Элементы выстраиваются как итоговая часть таблицы, аналогично тегу tfoot
table-header-group	Элементы выстраиваются как группа строк заголовков таблицы, аналогично тегу thead
table-row	Элементы выстраиваются как строки таблицы, аналогично тегу tr
table-row-group	Элементы выстраиваются как группа строк таблицы, аналогично тегу tbody
none	Элементы не имееют построения в дисплее
inherit	Наследует значение родителя

Свойство работает в браузерах

Пример применения свойства display для всех значений


<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство display</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.block {display:block;}
.inline {display:inline;}
.inline-block {display:inline-block;}
.inline-table {display:inline-table;}
.list-item {display:list-item;}
.run-in {display:run-in;}
.table {display:table;}
.table-caption {display:table-caption;}
.table-cell {display:table-cell;}
.table-column {display:table-column;}
.table-column-group {display:table-column-group;}
.table-footer-group {display:table-footer-group;}
.table-header-group {display:table-header-group;}
.table-row {display:table-row;}
.table-row-group {display:table-row-group;}
-->
</style>
</head>
<body>
<div class="block">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="inline">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="inline-block">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="inline-table">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="list-item">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="run-in">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="table">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="table-caption">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="table-cell">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="table-column">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="table-column-group">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="table-footer-group">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="table-header-group">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="table-row">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
<br>
<div class="table-row-group">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
<img src="/CSS_3/img_css_3/list_style2.gif">
</div>
</body>
</html>

Результат примера

Пример в действии. Свойство display

Браузеры

Internet Explorer до версии 7 включительно:

поддержка значений table-footer-group и table-header-group происходит только для тегов <thead> и <tfoot>;
для элементов <li> понимает значение block как list-item;
значение inline-block применяется только для встроенных элементов, с блочными элементами работает некорректно.

Opera 9.2, а также Firefox 2.0:

значение table-column применяется только для тега <col>;
значение table-column-group поддерживается только для тега <colgroup>.

Chrome 2.0, а также Safari версии 3 и старше, iOS:

значение run-in поддерживают только для элементов, которые располагаются перед встроенными элементами или такими, у которых значение display установлено как inline.

Safari 3.1

Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Позиционирование | Добавил: evkuriy (15.07.2013)

Просмотров: 639 | Теги: свойства CSS, позиционирование | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

display

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Дополнительные значения display

Значение

Описание

Свойство работает в браузерах

Пример применения свойства display для всех значений

Результат примера

Браузеры