Мы с вами уже знаем, что все элементы на веб-странице представляют собой блоки.
Но, для того, чтобы было возможно гибко управлять визуальным отображением этих блоков, используется несколько их разновидностей.
У каждого вида блоков есть свои характеристики.
За выбор вида, в котором будет отображаться блок, отвечает свойство display.
Есть 2 основные группы элементов, которые могут отображаться на веб-страницах:
1) Строчные элементы
display:inline;
2) Блочные элементы
display: block;
Все остальные значения свойства display, задают элементу характеристики строчных, блочных элементов или табличных элементов, в зависимости от тех условий, в которых они используются.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
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>
[wp-js-fiddle url="//jsfiddle.net/dimachen/MtB3P/1/" style="width:100%;height:400px;border:solid #4173A0 1px;"]
Абзац 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 здесь нет, он, по умолчанию, отображается как строчный элемент. Это не всегда сразу очевидно. Когда я об этом узнал, для меня это было неожиданно.
Пока на этом все. Об остальных значениях и видах элементов поговорим в следующих заметках.
Больше моих уроков по HTML, CSS и верстке сайтов здесь.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти