Справочник по CSS : Тематический указатель : Справочник по свойствам и атрибутам : Позиционирование : display

Материал из Справочник Web-языков

Версия от 13:25, 26 апреля 2011; Evgen (Обсуждение | вклад)

(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)

Перейти к: навигация, поиск

Содержание

1 Атрибут display | Свойство display
2 Синтаксис
3 Используемые значения
4 Замечания
5 Примеры
6 Стандарты
7 Поддерживаемые браузеры
8 Ссылки на источники

Атрибут display | Свойство display

Задает как элемент будет отображаться на web-странице.

Синтаксис

HTML	{ display : sDisplay }
Скрипты	[ sDisplay = ] object.style.display

Используемые значения

sDisplay: Строка, которая может определять и принимать от одно из следующих значений:

block: Элемент отображается как блочный.
inline: Значение по умолчанию. Элемент отображается как встроенный, с размерами, зависящими от контента.
list-item: В Internet Explorer 6.0 или старше. Объект отображается как блочный, плюс добавляется маркер элемента списка.
none: Элемент не отображается.
table-header-group: Объект отображается как tHead. Заголовок таблицы всегда отображается перед другими строками или группами строк этой таблицы и после любых других заголовков. Заголовок отображается на каждой странице, на которой есть эта таблица.
table-footer-group: Объект отображается как tFoot. Низ (footer) таблицы всегда отображается после других строк или групп строк этой таблицы и перед любыми другими. Footer отображается на каждой странице, на которой есть эта таблица.
inline-block: Элемент отображается как встроенный, но контент элемента отображается, как будто элемент блочный. Соседние элементы отображаются на той же строке, разделение пробелами допускается.
table: Internet Explorer 8.0. Объект отображается как таблица (table).
inline-table: Элемент не отображается. Объект отображается как таблица (table) внутри объекта типа inline-block.
table-row: Internet Explorer 8.0. Объект отображается как tr (table row - строка таблицы).
table-row-group: Internet Explorer 8.0. Объект отображается как tBody (table body - тело таблицы). Тело таблицы всегда располагается между заголовком table-header-group (хедером) и нижней частью table-footer-group (футером) таблицы.
table-column: Internet Explorer 8.0. Объект отображается как col.
table-column-group: Internet Explorer 8.0. Объект отображается как colGroup.
table-cell: Internet Explorer 8.0. Объект отображается как ячейка (td) или как ячейка заголовка (th - table header) в зависимости от расположения в таблице.
table-caption: Internet Explorer 8.0. Объект отображается как заголовок (caption).
run-in: Internet Explorer 8.0. Если объект run-in содержит внутри себя элемент типа block, то объект отображается как блочный. Если же нет, и следующий потомок является блочным, то объект отображается как встроенный (inline).
ruby: Internet Explorer 8.0. Показывает, что элемент определяет структуру ruby.
ruby-base: Internet Explorer 8.0. Показывает, что элемент определяет базовый текст ruby.
ruby-text: Internet Explorer 8.0. Показывает, что элемент определяет текст ruby.
ruby-base-container: Internet Explorer 8.0. Определяет один или более из базовых элементов ruby.
ruby-text-container: Internet Explorer 8.0. Определяет один или более из текстовых элементов ruby.

Это свойство читается/записывается для всех объектов. Атрибут Каскадных таблиц стилей (CSS) не наследуется. Значением по умолчанию является inline для всех объектов, но есть исключения:

ADDRESS	block
BLOCKQUOTE	block
BODY	block
CENTER	block
COL	table-column
COLGROUP	table-column-group
DD	block
DIR	block
DIV	block
DL	block
DT	block
FIELDSET	block
FORM	block
FRAME	none
hn	block
HR	block
IFRAME	block
LEGEND	block
LI	block
LISTING	block
MARQUEE	block
MENU	block
OL	block
P	block
PLAINTEXT	block
PRE	block
RT	ruby-text
RUBY	ruby
TABLE	table
TBODY	table-row-group
TD	table-cell
TFOOT	table-footer-group
TH	table-cell
THEAD	table-header-group
TR	table-row
UL	block
XMP	block

Замечания

Значения block и inline поддерживаются, начиная с Internet Explorer 5.0.

В Internet Explorer 5.0 и ранее значением по умолчанию для li является block.

Значение inline-block поддерживаtтся, начиная с Internet Explorer 5.0. Его можно использовать для задания размещения объекту, не определяя при этом высоту и ширину объекта.

Все видимые HTML объекты блочные или встроенные (block или inline). Например, объект div блочный, а объект span встроенный. Размещение блочных объектов начинается с начала новой строки, они могут включать в себя другие блочные и встроенные элементы.

Изменение значений свойства display для объектов влияет на размещение соседнего контента, например:

Добавление новой строки после элемента типа block.
Удаление строки из встроенного элемента.
Скрывает данные элемента со значением none.

В отличие от свойства visibility, display=none просто не оставляет места под объект на странице.

Значения table-header-group и table-footer-group могут быть использованы, чтобы задать отображение содержимого объектов tHead и tFoot на каждой странице, где размещается относящаяся к ним таблица.

Примеры

В первом примере показывается разница между значениями inline, block и none свойcтва display.

<SPAN ID=oSpan>
This is a SPAN 
</SPAN>
in a sentence.
<P>
<INPUT TYPE=button VALUE="Block" 
    onclick="oSpan.style.display='block'">
:

Во втором примере используется вызов функции, которая показывает или скрывает столбцы таблицы

<SCRIPT>
function getPets()
{
    oRow1Cell2.style.display="none";
    oRow2Cell2.style.display="block";
    oRow3Cell2.style.display="none";
}
</SCRIPT>
:
<TABLE>
<TR ID="oRow1"><TD>Лошади</TD>
<TD ID="oRow1Cell2">Породистые</TD>
<TD>Fast</TD></TR>
<TR ID="oRow2"><TD>Собаки</TD>
<TD ID="oRow2Cell2">Борзые</TD>
<TD>Fast</TD></TR>
<TR ID="oRow3"><TD>Сумчатые</TD>
<TD ID="oRow3Cell2">Опоссумы</TD>
<TD>Slow</TD></TR>
</TABLE>
:
<INPUT TYPE=button onclick="getPets()" 
    VALUE="Показать семейства животных">

Стандарты

Это свойство описано в Cascading Style Sheets (CSS), Level 1 (CSS1)

Поддерживаемые браузеры

Internet Explorer 5.5, 6.0, 7.0, 8.0

Opera 7.0, 8.0, 9.2, 9.5, 9.6, 10.0

Safari 1.3, 2.0, 3.1

Firefox 1.5, 2.0, 3.0, 3.5

Для каждого из браузеров существуют некоторые ограничения, например:

Internet Explorer 7.0: только tHead и tFoot поддерживают значения table-header-group и table-footer-group. Если значение block применяется к элементам <li>, то результат будет таким же, как если бы применялось значение list-item.
Firefox 2.0 и младше, Opera 9.2: значение table-column применяется только для элементов <col>. Значение table-column-group применимо только для <colGroup>.