... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Использование блоков. Модель визуального форматирования. (стр.1)

 

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков  ||  Блоки и таблицы


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

В соответствии с моделью визуального форматирования каждый элемент дерева документа порождает некоторое произвольное количество блоков (а может и не порождать блоков вовсе). Размещение этих блоков в окне браузера обусловливается несколькими показателями, и прежде всего, размерами и типом блока. Как вы помните, бывают элементы, порождающие структурные и строчные блоки. Рассмотрим простой пример кода.

<DIV>
Простой текст порождает безымянный структурный блок
<Р>Структурный блок параграфа с <ЕМ>выделением - строчным блоком</ЕМ>. Остаток параграфа - безымянный строчный блок</Р> Еще один фрагмент текста, порождающий безымянный структурный блок
<DIV>

На этом примере легко разобраться, какой из элементов порождает блоки какого типа. Причем блоки могут быть и безымянными, если нет элемента, породившего их. Элемента нет, а блок есть, ив этом случае он будет безымянным.

Черный цвет - безымянные структурные блоки. Синий цвет - безымянные строчные блоки. Красный цвет - cтрочный блок EM. Зеленый цвет + серый фон - структурный блок P.



Далее, в CSS существует понятие схемы позиционирования (алгоритма), от которой также будет зависеть размещение блоков на экране. И наконец, взаимное расположение блоков рядом друг с другом также может оказывать влияние на внешний вид документа; Это проявляется, например, при перекрытии полей соседствующих элементов. В стандарте CSS 2 положение и размеры блоков вычисляются относительно контейнера. Контейнером для любого блока, как правило, служит его непосредственный предок в дереве элементов документа. Например, элемент BODY (точнее, порождаемый им блок) служит контейнером для всех остальных блоков. Окно браузера также может служить контейнером для некоторых блоков.

В приведенном выше примере элемент DIV является контейнером для двух безымянных структурных блоков и одного блока Р. Относительно контейнера, содержащего блок, задается лишь положение этого блока, а его размеры никак не зависят от размера контейнера и даже могут его превышать. Иначе говоря, блок может выходить за пределы контейнера. Например, когда содержимое HTML-страницы не помещается по ширине в окно браузера, появляется дополнительная горизонтальная полоса прокрутки.

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

В HTML точно позиционировать некий элемент можно только в том случае, если поместить его в ячейку таблицы. Дизайнеры и "полюбили" таблицы за то, что они дали им инструмент позиционирования элементов на странице, хотя предназначались они для другого. Как уже упоминалось, появление поддержки таблиц в браузерах вызвало небывалый подъем в сфере Web-дизайна. Язык CSS обладает своими возможностями при позиционировании блоков. Но прежде чем приступать к изучению этих механизмов, необходимо разобраться с тем, какого типа блоки существуют в CSS.

 

Блоковая модель ||  Модель визуального форматирования ||  Подключение таблиц стилей при помощи JavaScript
Управление видимостью блоков ||  Блоки и таблицы

 

Страница: - 1 - | - 2 - | - 3 - | - 4 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены