Loading
Красноглазым Джедаям
компьютерной вселенной
посвящается.

Модель компоновки

Все элементы страницы кроме html; body; table; делятся на строковые и блочные боксы. Строковые боксы это строки текста и изображения. Блочные боксы это параграфы, списки, заголовки и другие элементы - прямоугольники.

В любви теряют рассудок, в браке замечают потерю.

Строковые боксы:

Блочные боксы

Плавающий элемент

Теперь можно рассмотреть понятие "Плавающего элемента". Это элемент, позволяющий себя обтекать, то есть имеющий заданный float. Плавающий бокс исключается из потока документа и смещается в указанном направлении. Следующий плавающий бокс причаливает к предыдущему вплотную в горизонтальном потоке, но не налазит на него. Если задать для элемента отрицательные поля, то он налазит на соседний элемент в сторону отрицательного поля. Плавающие боксы извлечены из потока документа, а значит никак не влияют на бокс - предок который остается в потоке. Однако плавающие боксы - предки охватывают своих плавающих потомков. Таким образом мы можем говорить о двух типах потока документа. Первый существует независимо от нашего вмешательства. Второй мы создаем, когда создаем плавающий бокс. Он плывет в своем потоке и относительно него все боксы - его потомки плывут в этом же потоке.

Структура бокса(модель компоновки)

Итак каждый бокс представляет из себя прямоугольник, в подавляющем большинстве случаев он вложен в другие прямоугольники. Каждый такой прямоугольник имеет следующие свойства:

margin
Поля вокруг прямоугольников - пустое место, как контрольно следовая полоса вокруг государственной границы, ее ширину мы можем изменять. В двух смежных элементах имеющих ненулевые поля будет применяться только большее из двух(поля не суммируются). Этот эффект называется "Сжатие полей". Исключение составляют списки(элементы ul; ol; dl;) и заголовки(элемент h;) в них поля суммируются. Задание отрицательных значений полей приводит к ликвидации смежных полей и даже к наползанию элемента на смежный. Это в нашем примере будет эффект наползания например территории одного государства на территорию другого. Этот катаклизм достоин Голливуда. Строковые элементы, кроме img, полей не имеют.
border
Это собственно границы, как заграждение из колючей проволоки, хотя в наших силах средствами CSS поменять вид забора например на бетонный.
padding
Это заполнение, расстояние между границей и текстом блока, как расстояние от забора до вышки пограничника(при условии что вышка не встроена в забор), это расстояние мы тоже можем изменять. Если задать отрицательное значение, то вышка пограничника встанет на территорию другого государства, поэтому задание отрицательных значений недопустимо вообще! Если задать ноль, то вышка встроится в забор. Значение auto бесполезно. Сжатие не происходит. Строковые элементы имеют заполнение.

Списки как блочные боксы.

Списки очень часто применяются для оформления меню сайтов, и в том числе горизонтальные. Сам по себе список это блочный элемент, со всеми присущими блочному элементу свойствами. Но с помощью float:left или display:inline можно список вытянуть в строку.

Основные меню должны оформляться списком анкерных ссылок, это во первых сделает возможным индексацию в поисковых машинах, во сторых если у кого то отключены скрипты, то ваше меню он все равно увидит.

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

Наблюдение за позиционирумыми блоками

Допустим есть блок предок и в нем блок потомок. Назначаем блоку потомку position:absolute;. Родительский блок схлопывается, а блок потомок остается на месте, где и был. Теперь он позиционируется относительно окна браузера. Добавляем в блок предок position:relative;. Блок предок обнимает блок потомок(стал объемлющим)(не работает в IE 6) и теперь позиционирование потомка идет относительно предка. Должны быть явно заданы размеры блоков, иначе блоки position:absolute; будут схлопываться по содержанию.

Хотя родительский блок position:relative; в IE 6 не охватывает вложенные блоки position:absolute; тем не менее их позиционирование осуществляется именно относительно родительского блока, а не от окна браузера. И если убрать position:relative; то вложенные блоки будут позиционированы относительно окна браузера. Это можно проверить если задать для вложенных блоков позицию right: 1em;. При этом для родительского блока явно указать ширину уже окна браузера. Должны быть явно заданы размеры блоков.

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

Абсолютно позиционированные элементы автоматически генерируют блочные боксы из стороковых элементов.

Блоки со свойствами float: left; как и position:absolute; будут схлопываться по содержанию. Одновременное употребление этих свойств бесполезно, так как приоритет имеет position:absolute;

Абсолютно позиционированный блок с заданным свойством right: 1em; будет позиционирован своей правой границей по правой границе родительского блока position:relative; или окна браузера со смещением влево на 1em. Аналогично зеркальным отображением будет left: 1em;

Абсолютно позиционированный блок с заданным свойством right: -1em; будет позиционирован своей правой границей по правой границе родительского блока position:relative; или окна браузера со смещением вправо на 1em. Аналогично зеркальным отображением будет left: -1em;

Использование z-index: Абсолютно позиционированный блок одного уровня потомок будет перекрывать предка при z-index:0; Если изменить z-index: 1; то блок с этим свойством вылезет на верх. Работает только для блоков одного уровня! Вложенные блоки и блоки родители на изменение z-index: не реагируют.

Блочные элементы, а также таблицы имеют свой задний фон(background) но по умолчанию он прозрачен(transparent).


Контактная информация

E-Mail: oleynikww@gmail.com

Добавить комментарий

Комментарии пользователей