Рассмотрим сначала общие принципы работы браузера, затем более подробно опишем его работу, с учетом разделения элементов на блочные и строчные. Наконец, приведём уточнённые правила построения браузером самого распространённого элемента на страницах — абзаца.
Браузер, интерпретируя HTML-код, формирует на экране документ, который видит пользователь. Элементы отображаются последовательно — слева направо (строчные) и сверху вниз (блочные), в соответствии с порядком следования элементов в HTML-коде. Нельзя написать код на “чистом” HTML так, чтобы браузер сначала нарисовал линию в нижней части экрана, а потом вывел текст в верхней.
Когда рисование программируют на Бейсике или Си, есть возможность вывести элемент в любое место экрана по своему усмотрению. HTML-программы таким свойством не обладают. HTML не работает с экранными координатами.
Программируя на HTML, нельзя ориентироваться на определенные размеры окна документа. Браузер использует то окно, которое предоставил ему пользователь. Значит, одна и та же HTML-страница может отображаться на экране немного по-разному на разных компьютерах и даже на одном компьютере, если настроить его по-другому: изменить разрешение экрана или размеры окна браузера.
В одном окне можно увидеть такой документ:
Тот же самый документ в другом окне смотрится по-другому:
Проверьте: Первый HTML-документ
Видно, что длина линии HR зависит от размеров окна. Заголовок H1 вынужден занять 2 строки. Абзац P выводится так, чтобы поместиться в окне. При этом браузер не обращает внимания на то, как строки абзаца размещены в HTML-коде.
Все эти “причуды” браузера заставляют новичка на вопрос “Как работает браузер?” ответить кратко: “Плохо!”. Однако отмеченные минусы — это лишь плата за универсальность HTML-кода. И, надо сказать, плата не так высока.
Обозначенные ограничения оборачиваются положительной стороной HTML, делая его независимым от компьютерной платформы (DOS, Windows, Unix, MacOs, …) и параметров видеовывода конкретного компьютера (CGA, EGA, VGA, SVGA, …), в частности, от количества экранных точек (пикселов) и текущих размеров окна браузера.
Это означает, что наш HTML-документ способны увидеть все, у кого на компьютере установлена программа-браузер. И становится неважным, какой тип компьютера, и какой тип операционной системы предпочитает конкретный пользователь. Именно это свойство HTML-документов играет такую важную роль в глобальной компьютерной сети Интернет, где представлены все мыслимые типы компьютеров и операционных систем.
Опишем более подробно правила работы браузера.
Элемент HTML визуально совпадает с окном браузера. В него вложен элемент BODY, который по умолчанию имеет отступы от границ родителя (то есть от границ окна).
Внутри BODY располагается цепочка блочных элементов. Даже если разработчик записал строчный элемент или неразмеченный фрагмент текста, он будет помещён в специально созданный безымянный блок автоматически.
Браузер выводит блочные элементы друг за другом сверху вниз. При этом ширина блочного элемента совпадает с доступной шириной родителя, а высота определяется по содержимому.
Каждый раз, когда внутри блока обнаруживаются блочные элементы, они строятся на экране прямоугольниками сверху вниз по ширине родителя.
Если в блоке есть смесь блочных и строчных элементов (на уровне прямых потомков), то все строчные элементы (а также неразмеченный текст) собираются в безымянные блоки и строятся по описанным выше правилам построения блоков.
Если внутри блока нет других блоков, а только строчные элементы, браузер выводит их в строку, пытаясь заполнить всю ширину родительского блока. Если материал в одной строке не умещается, он переносится на следующие строки.
Строки по умолчанию выравниваются со стороны, принятой для текущего языка (слева для русского).
При изменении ширины окна браузер перевёрстывает страницу: ширину блоков подгоняет под новый размер, ширину строк под изменившуюся ширину содержащих их блоков.
Такую работу браузера называют вёрсткой потоком, а в силу подгонки материала под текущий размер окна — резиновой вёрсткой.
Абзац — блочный элемент, поэтому правила его построения подчиняется общим правилам построения блока: блок выводится прямоугольником во всю ширину родительского элемента. Если абзац является прямым потомком BODY, его ширина совпадает с шириной окна браузера (не считая предопределённых отступов BODY от рамки окна).
Внутри абзаца располагаются строчные элементы. Они выводятся на экран обычным образом: браузер заполняет текущую экранную строку до упора в правый край блока P, после чего остаток переносится на следующие строки.
Отметим, что для абзаца характерны отступы по вертикали (сверху и снизу), которыми браузер обрамляет содержащий абзац прямоугольник. Прямоугольники обычных блоков (таких, как контейнер DIV) следуют друг за другом плотно, а абзацы отделяются сверху и снизу промежутками размером в одну строку.
Таким образом, правила построения абзаца можно сформулировать следующим образом:
В дополнение к приведённым правилам отметим, что промежутки между
абзацами не удваиваются. Это эффект называется схлопыванием,
он подробно рассматривается в разделе
Тема 2/Стилевые свойства/Внешние отступы
(ссылка).
