[БЕЗ_ЗВУКА] Тема сегодняшней и следующих двух лекций — модель отображения. Мы будем рассказывать вам о том, как браузер вообще выставляет элементы, какими механизмами руководствуется, и как с этим совладать и приручить. Итак, давайте же начнем. Все элементы, которые мы видим в окружающем нас мире, являются квадратиками. Это хорошо доказал фильм «Пиксели». Ну, конечно же, это не совсем так, но приятно думать, что наверное, так может быть. Но если мы с вами будем говорить о браузере, то в браузере все элементы являются прямоугольниками. Вы их не видите? Хорошо, давайте я вам их покажу, вот они. Итак, вся страница состоит из прямоугольников. Эти прямоугольники как-то взаимодействуют друг с другом, и об этом мы будем говорить на протяжении трех лекций. Каждый прямоугольник состоит из нескольких вложенных прямоугольников. Самый первый из них — это content-прямоугольник или content-бокс. Дальше я все прямоугольники буду называть боксами, так, как это принято во всей литературе. Content-бокс вложен в padding-бокс, padding-бокс вложен в border-бокс, и border-бокс вложен в margin-бокс. Все это, в принципе, называют боксом, то есть прямоугольником, который в итоге отрендеривается в браузере. Не у каждого элемента есть все эти прямоугольники. Например, у элемента может не быть padding-бокса и border-бокса. Или, например, две грани margin-бокса могут отсутствовать. Но content-бокс есть у любого элемента, который визуально показывается в браузере. Важно отметить, что не все из этих прямоугольников вы вообще можете увидеть. На самом деле вы можете увидеть только border-бокс. Для этого есть специальные CSS-свойства, которые задают размеры и цвет border'а. Важно здесь также заметить, что сочленение двух разных border'ов, если они будут нарисованы разным цветом — это диагональ, проведенная из угла в угол. Padding-бокс вы можете также увидеть, но за это отвечает свойство background. Как же будет выглядеть итоговый элемент? За это отвечает визуальная модель форматирования. Это алгоритм, который используется для обработки документов и отображения его визуального представления. Каждый элемент на странице трансформируется в ноль, один или более боксов. Ну, давайте рассмотрим на конкретных примерах. В ноль, например, трансформируется input со значением type:hidden. Мы его не увидим на странице, поэтому у него боксов будет ноль. В один бокс будут трансформироваться практически все известные нам элементы, поэтому нам интереснее посмотреть, какие же элементы транслируются в большее количество боксов. Например, это элементы списка. У них помимо контентного содержания, где содержится текст элемента списка, есть еще буллет, который является отдельным боксом. Визуальная модель форматирования, если говорить достаточно грубо, она определяет, как страница будет отрендерена. На то, где расположится элемент в итоге, влияет много условий. Первое из них — это размеры бокса: заданы ли они или браузеру придется высчитать их автоматически в зависимости от контента, который вставлен в элемент. Следующее условие — это тип бокса: блочный, инлайновый, может быть, какой-то другой. Следующее — это то, где вообще элемент находится, какие у него соседи, что вы вложили внутрь него. Все это влияет. Следующее — это размер и положение viewport'а. В случае с десктопными браузерами это будет размер браузера. В случае с мобильными устройствами это будет то, как вы держите это устройство: горизонтально или вертикально. Следующее — это внутренние пропорции элемента. Например, у картинок есть ширина, которая приходит в метаинформации вместе с картинкой. Браузер не может ее считать мгновенно. Ему нужно сначала загрузить эту картинку, а потом он может прочитать, каких она размеров. Это влияет на то, как будет в итоге рендериться страница. Я думаю, вы не раз замечали, что иногда вы, загрузив страницу, проскралливаете, и у вас она начинает прыгать. Чаще всего это именно поэтому и происходит, что браузер дозагружает картинки, понимает, каких они размеров и изменяет свою разметку. И наконец, последнее — это то, какая схема позиционирования используется в вашей верстке: поточная, плавающая или абсолютная. Об этом мы будем говорить подробнее.
