Визуальная модель форматирования CSS (Визуальная модель форматирования)

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

CSS визуальная модель форматирования

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

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

• Размеры коробки.

• Тип элемента (блочный или inline)

• Планировка позиционирования (нормальный поток,ФлоатиАбсолютное позиционирование)

• Отношения элементов в дереве документа.

• Внешняя информация, такая как размер视ора, встроенные размеры изображений и т.д.

Типы рамок, создаваемых CSS

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

Блочные элементы и блоковые рамки

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

Обычно, блочные элементы могут содержать inline элементы и другие блочные элементы.

Inline элементы и inline фреймы

Inline элементы - это элементы, которые не составляют новых блоков контента в исходном документе; контент распределен по строкам. Например, элементы абзацев (<em>и т.д. в элементах跨度 (<span>и т.д. в сильных элементах (<strong>и т.д. внутри подчеркивающего текста.

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

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