Справочник по 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>.
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms530751(VS.85).aspx