Модель визуального форматирования CSS — это алгоритм, который используется для обработки документов на визуальном носителе. В модели визуального форматирования каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с Блочной моделью.
Расположение этих блоков зависит от следующих факторов:
- размеры элемента (
box-sizing); - тип элемента (блочный или строчный);
- схема позиционирования (нормальный поток, float и абсолютное позиционирование);
- отношения между элементами в дереве документа;
- внешняя информация, например размер окна просмотра, встроенные размеры изображений и т. д.
Дерево документа — это иерархия элементов, закодированных в исходном документе. Каждый элемент в дереве документа имеет ровно одного родителя, за исключением корневого элемента, у которого его нет.
Типы блоков (box) в CSS
Каждый элемент, отображаемый на веб-странице, создает прямоугольное поле. В следующем разделе описаны типы блоков, которые могут быть сгенерированы элементом.
Блочные элементы (block)
Блочные элементы — это те элементы, которые визуально отформатированы как блоки (т. е. занимают всю доступную ширину) с разрывом строки до и после элемента. Например, элемент абзаца (<p>), заголовки (<h1> - <h6>), тег (<div>) и т. д.
Как правило, элементы блочного уровня могут содержать встроенные строчные элементы и другие блочные элементы.
Строчные элементы (inline)
Строчные элементы — это те элементы, которые не образуют новые блоки контента; контент распределяется по строкам. Например, выделенные фрагменты текста внутри абзаца (<em>), спаны (<span>), стронги (<strong>) и т.д.
Встроенные строчные элементы могут содержать только текст и другие встроенные элементы.
В отличие от блочных элементов, строчные элементы занимает только необходимую ширину и не вызывают разрывов строк.
Вы можете изменить способ отображения элемента на веб-странице, используя CSS-свойство display. Вы узнаете о его свойствах в следующей главе.
