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

смотрим также

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

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


Содержание

Атрибут 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>.

Ссылки на источники

http://msdn.microsoft.com/en-us/library/ms530751(VS.85).aspx

https://developer.mozilla.org/en/CSS/display

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="http://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования