Визуальная модель CSS
В языке CSS имеется два основных объекта форматирования:
• Блок (block)
• Встроенный объект (inline object)
Если говорить об отображаемых на экране элементах, то следует указать еще три:
• Плавающий объект (floating object)
• Список
• Таблица
Здесь можно провести сравнение с таблицей, имеющей определенны специфические характеристики: у нее могут быть заголовки, ячейки, строки и столбцы. Однако модель таких объектов не согласуется с CSS из-за различий в методах ее декларации. Так, хотя блоковые и встроенные потоковые объекты являются значениями свойства display, плавающий объект сам представляет собой свойство, которое принимает различные значения. Таким образом, синтаксис CSS отличается от визуальной модели.
Блок: значение (свойства dilplay)
Встроенный элемент: значение (свойства dilplay)
Таблица: значение (свойства dilplay)
Список: свойство
Плавающий объект: свойство
Сосредоточимся пока на блоковых и встроенных объектах форматирования. Блоки расположены друг над другом в стеке. Этот стек ориентирован в том же направлении, что и направление записи. Если запись осуществляется слева направо и сверху вниз, то блоки в содержащем их прямоугольнике упакованы сверху в низ.
Встроенные объекты представляют собой ячейки в блоках, т.е. блоки являются контейнерами встроенных объектов, а встроенные объекты содержаться в блоках. Если запись осуществляется слева направо, то встроенные ячейки располагаются одна за другой внутри ячейки блока:
Большинство языков стилей основано на потоковой модели визуализации, в соответствии с которой объекты форматирования просто отображаются один за другим, а визуализация осуществляется в порядке записи. CSS поддерживает эту модель, но поддерживает также и абсолютное позиционирование. Ячейка может быть расположена строго в указанном месте или визуализирована после последней отображенной ячейки. Распространенным применением документов, при котором элементы отображаются в указанных местах, являются формы, где поля имеют абсолютные координаты:
Чтобы поместить на визуализируемую страницу запись или изображение, можно задать элемент со свойством float, что приводит к созданию специальной ячейки, располагаемой слева или справа в содержащей его ячейке. Поток форматирования размещает содержимое вокруг плавающего объекта (см. следующий рисунок).
Достарыңызбен бөлісу: |