## 03. Как работает браузер

Рассмотрим сначала общие принципы работы браузера, затем более подробно опишем алгоритм его работы, с учетом разделения элементов на блочные и строчные. Наконец, приведём уточнённый алгоритм построения браузером самого распространённого элемента на страницах — абзаца.

### Общие принципы

Браузер, интерпретируя 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`) следуют друг за другом плотно, а абзацы отделяются сверху и снизу промежутками размером в одну строку.

Таким образом, алгоритм построения абзаца можно сформулировать следующим образом:

1. Перед абзацем формируется промежуток размером в одну строку.
2. Абзац выравнивается по левому краю (для языков с написанием слева направо).
3. Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде.
4. Перенос текста на новую строку выполняется, если очередное слово не помещается в экранной строке, а не тогда, когда HTML-коде начинается новая строка.
5. После абзаца формируется промежуток размером в одну строку.

вверх