Модели отображения блочных элементов

⇐ Предыдущая 19 20 21 222324 25 26 27 28 Следующая ⇒

С чего начинается документ

Общие правила и рекомендации при написании HTML/XHTML кода

Итак, с чего же начинается HTML-документ? Конечно же с описания его типа при помощи DOCTYPE! (см. 2). В первую очередь вы должны полностью осознавать какой именно тип документа вы собрались воплотить в жизнь. Впрочем, независимо от того, какой это будет документ, произвольный HTML или XHTML 1.0 Strict, вам в любом случае необходимо придерживаться общих правил форматирования (см. 4) и советам, изложенным здесь и в последующих разделах.

При помощи конструкции DOCTYPE браузер определяет с каким типом документа он имеет дело. Ниже приведены конструкции DOCTYPE для основных видов документов.

HTML 4.01 Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Следует отметить, что в Интернет встречается много документов с неполной записью DOCTYPE – когда не указан URL на DTD, либо не указан вовсе. В случае отсутствия DOCTYPE в документе, браузер настраивается на тип документа по умолчанию, который, как вы сами понимаете, может отличаться от ожидаемого. Подобные неточности являются причиной многих ошибок и трудностей при работе с такими документами. Самая известная особенность связанная с указанием типа документа – это модель отображения блочных элементов, характерная для браузеров Internet Explorer (см 6.2.2). Во избежание возможных ошибок и неприятностей всегда указывайте полную запись DOCTYPE.

Учитывая популярность браузера Internet Explorer 6.0, можно по праву сказать, что существует две модели отображения блочных элементов, или так называемых боксовых моделей (box model):

Модель Internet Explorer (IE)
Стандартная модель W3C

Модель IE говорит о том, что, если вы определяете ширину (width) блочного элемента (например элемента DIV), то величина отступа (padding) и ширина границы (border-width) входят в состав этой величины. Стандартная модель W3C утверждает обратное: величина отступа и ширина границы должны дополнять ширину элемента. В итоге имеем два абсолютно разных значений реальной (отображаемой) ширины объекта при одних и тех же значениях width, padding и border-width. Рассмотрим пример с шириной объекта равную 200 пикселей, внутренним отступом в 20 пикселей и шириной границы, чтоже равной 20 пикселям. Получаем следующую запись в CSS:

CSS фрагмент для объекта

width: 200px;

padding: 20px;

border-width: 20px;

Реальная (отображаемая) ширина объекта для модели Internet Explorer равна 200 пикселей, для модели W3C:

200 + 2*20 + 2*20 = 280 пикселей.

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

Рисунок 6‑2. Модели отображения блочных элементов.

Использование модели W3C обязывает делать дополнительные вычисления при работе с CSS. К тому же модель Internet Explorer кажется более логичной с точки зрения взаимного расположения и взаимодействия объектов. Тем не менее, стандарт есть стандарт, модель Internet Explorer следует считать устаревшей, а ориентироваться нужно на модель W3C.

Браузер Internet Explorer 6.0 поддерживает обе модели, в зависимости от того, какой тип документа указан в начале документа. Имеет значение также и то, приведена полная его запись или укороченная, без URL на DTD. Таблица, приведенная ниже, описывает поведение Internet Explorer 6.0 в зависимости от записи DOCTYPE.

Таблица 6‑2 – Конструкция DOCTYPE и модель отображения блочных элементов Internet Explorer 6.0

Конструкция DOCTYPE	Режим Internet Explorer 6.0
DOCTYPE не указан	Модель IE
HTML 4.01 – не указан URL в DOCTYPE	Модель IE
HTML 4.01 – полная запись	Модель W3C
XHTML 1.0 – не указан URL в DOCTYPE	Модель W3C
XHTML 1.0 – полная запись	Модель W3C

Следует отметить, что есть еще одно принципиальное отличие между двумя моделями в Internet Explorer 6.0. Оно состоит в том, что стандартная модель рассматривает элемент html как отображаемый, который является контейнером для элемента body. Пример, приведенный ниже, поможет понять эту разницу.

Пример отображения свойств элемента HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>Style For HTML Element Sample</title>

</head>

<div style="background:yellow;">Content goes here...</div>

</body>

</html>

Если убрать описание DOCTYPE, Internet Explorer 6.0 покажет совершенно иную картину.

⇐ Предыдущая 19 20 21 222324 25 26 27 28 Следующая ⇒

Поделиться с друзьями:

Дата добавления: 2014-12-16; Просмотров: 376; Нарушение авторских прав?; Мы поможем в написании вашей работы!

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление

Генерация страницы за: 0.011 сек.