<b><span id='2.12._<a href="/?q=Форматирование">Форматирование</a>_блоков'>2.12. Форматирование блоков</span></b>
<br />Как вы уже знаете, любой элемент Web-страницы занимает в окне Web-браузера некоторую прямоугольную область. Эта область имеет как внутренние, так и внешние отступы, а также содержит реальную или воображаемую границу. Тип блочной модели зависит от формата документа. Если тег DOCTYPE> указан, то блочная модель соответствует стандартам консорциума W3C. Реальные размеры элемента вычисляются так:
<br />Реальная ширина = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
<br />Реальная высота = margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom
<br />Если тег не указан, то Web-браузер Internet Explorer переходит в режим совместимости (Quirks Mode). В этом режиме padding и border входят в состав width и height, а следовательно, реальные размеры будут другие:
<br />Реальная ширина = margin-left + width + margin-right Реальная высота = margin-top + height + margin-bottom
<br />Поэтому при отсутствии тега DOCTYPE> разные Web-браузеры могут по-разному отображать Web-страницу.
<br />
<br />
<br /><span><i><b>Примечание</b></i></span>
<br />Более подробную информацию о типах блочной модели можно получить в Интернете на странице консорциума W3C <u>http</u><u>://</u><u>www</u><u>.</u><u>w</u><u>3.</u><u>org</u><u>/</u><u>TR</u><u>/</u><u>CSS</u><u>2/</u><u>box</u><u>.</u><u>html</u> и на странице <u>http</u><u>://</u><u>www</u><u>.</u><u>quirksmode</u><u>.</u><u>org</u><u>/</u><u>css</u><u>/</u><u>box</u><u>.</u><u>html</u>.
<br /><b><span id='2.12.1._Указание_типа_блока'>2.12.1. Указание типа блока</span></b>
<br />Атрибут display предназначен для указания типа блока. Может принимать следующие значения:
<br /><ul> <li/>
<br />block — блок занимает всю ширину родительского элемента. Значение block по умолчанию имеют теги <div> и <p>;
<br /><li/>
<br />inline — блок занимает только необходимое для отображения содержимого пространство. Значение inline по умолчанию имеют теги ,
<br /></ul>
<br /><span><b> и др.;
<br /><ul> <li/>
<br />inline-block — аналогично inline, но дополнительно можно задать размеры и другое форматирование, применяемое для блочного элемента. Результат аналогичен встраиванию тега <img> в строку;
<br /><li/>
<br />none — содержимое блока не отображается.
<br /></ul>
<br />Различные варианты использования атрибута display приведены в листинге 2.8.
<br />
<p>! Листинг 2.8. Атрибут <b>display</b></p>
<br /><sup><span lang="en-us">M</sup><u>http://www.w3.org/TR/html4/strict.dtd</u><sup><u>M</u></sup>>
<br /><html> <head>
<br />^^^>Атрибут display
<]а2>Различные типы блоков
display = inline
display = inline
display = inline-block
display = block
Этого блока не видно
<]а2>Выравнивание элементов формы12>
<112>Указание типа блока для ссылки
Обычная ссылка
Ссылка занимает всю ширину блока<^>
overflow = hidden
этооченьдлиннаястрокабезпробелов
То, что не влезает в границы блока, скрывается
overflow = scroll
этооченьдлиннаястрокабезпробелов
overflow = scroll. У блока в любом случае отображаются полосы прокрутки
overflow = auto
overflow = auto
overflow = auto
этооченьдлиннаястрокабезпробелов
overflow = auto. Если содержимое не помещается в блок, то добавляются полосы прокрутки
overflow = visible. Высота не задана
этооченьдлиннаястрокабезпробелов
overflow = visible. Блок расширяется так, чтобы все его содержимое
отобразилось полностью
overflow = visible. Высота задана
этооченьдлиннаястрокабезпробелов
overflow = visible. Если размеры заданы, то содержимое будет выходить за границы блока
