Просмотров: 1 298

Виды элементов в CSS и свойство display.

Мы с вами уже знаем, что все элементы на веб-странице представляют собой блоки.

Но, для того, чтобы было возможно гибко управлять визуальным отображением этих блоков, используется несколько их разновидностей.

У каждого вида блоков есть свои характеристики.

За выбор вида, в котором будет отображаться блок, отвечает свойство display.

Есть 2 основные группы элементов, которые могут отображаться на веб-страницах:

1) Строчные элементы

display:inline;

2) Блочные элементы

display: block;

Все остальные значения свойства display, задают элементу характеристики строчных, блочных элементов или табличных элементов, в зависимости от тех условий, в которых они используются.

display: table;
inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption
display: inline-block
display: list-item
display:run-in

Если элемент не должен отображаться на странице, то свойство display будет принимать значение none.

Каждое из этих свойств, имеет смысл рассматривать отдельно, для того, чтобы разобраться с теми характеристиками, которые они приобретают. Это мы и сделаем в следующих заметках.

Сейчас лишь хочу показать, как работает свойство display со значением none.

<p>Пример абзаца</p>
<p style="display:none;">Пример абзаца 2</p>
<p>Пример абзаца 3</p>

Абзац 2 просто перестает отображаться на странице. Страница выводится, как-будто его и нет.

Когда вы явным образом не задаете свойство display элементу, все равно это свойство присваивается ему по умолчанию браузером.

Значение по умолчанию, которое будет применяться для элементов это

display:inline

Но есть несколько элементов, которые, как правило, в браузерах представляются в блочном представлении.

Это элементы:

html, address,
blockquote,
body, dd, div,
dl, dt, fieldset, form,
frame, frameset,
h1, h2, h3, h4,
h5, h6, noframes,
ol, p, ul, center,
dir, hr, menu, pre   { display: block; unicode-bidi: embed }

Есть еще несколько исключений из правила:

li              { display: list-item }
head            { display: none }
table           { display: table }
tr              { display: table-row }
thead           { display: table-header-group }
tbody           { display: table-row-group }
tfoot           { display: table-footer-group }
col             { display: table-column }
colgroup        { display: table-column-group }
td, th          { display: table-cell }
caption         { display: table-caption }

В спецификации об этом написано здесь:

http://www.w3.org/TR/CSS21/sample.html

Обратите внимание, что элемента img здесь нет, он, по умолчанию, отображается как строчный элемент. Это не всегда сразу очевидно. Когда я об этом узнал, для меня это было неожиданно.

Пока на этом все. Об остальных значениях и видах элементов поговорим в следующих заметках.