Модель визуального форматирования CSS — это алгоритм, который используется для обработки документов на визуальном носителе. В модели визуального форматирования каждый элемент в дереве документа генерирует ноль или более блоков в соответствии с Блочной моделью.

Расположение этих блоков зависит от следующих факторов:

  • размеры элемента (box-sizing);
  • тип элемента (блочный или строчный);
  • схема позиционирования (нормальный поток, float и абсолютное позиционирование);
  • отношения между элементами в дереве документа;
  • внешняя информация, например размер окна просмотра, встроенные размеры изображений и т. д.

Дерево документа — это иерархия элементов, закодированных в исходном документе. Каждый элемент в дереве документа имеет ровно одного родителя, за исключением корневого элемента, у которого его нет.

Типы блоков (box) в CSS

Каждый элемент, отображаемый на веб-странице, создает прямоугольное поле. В следующем разделе описаны типы блоков, которые могут быть сгенерированы элементом.

Блочные элементы (block)

Блочные элементы — это те элементы, которые визуально отформатированы как блоки (т. е. занимают всю доступную ширину) с разрывом строки до и после элемента. Например, элемент абзаца (<p>), заголовки (<h1> - <h6>), тег (<div>) и т. д.

Как правило, элементы блочного уровня могут содержать встроенные строчные элементы и другие блочные элементы.

Строчные элементы (inline)

Строчные элементы — это те элементы, которые не образуют новые блоки контента; контент распределяется по строкам. Например, выделенные фрагменты текста внутри абзаца (<em>), спаны (<span>), стронги (<strong>) и т.д.

Встроенные строчные элементы могут содержать только текст и другие встроенные элементы.

В отличие от блочных элементов, строчные элементы занимает только необходимую ширину и не вызывают разрывов строк.

Вы можете изменить способ отображения элемента на веб-странице, используя CSS-свойство display. Вы узнаете о его свойствах в следующей главе.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.