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

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

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

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

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

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

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

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

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

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

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

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

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

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

Похожие посты

Руководство по свойству opacity в CSS

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

Руководство по свойству margin в CSS

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

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

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

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

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