Блочная верстка

Верстка с помощью слоев

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

Синтаксис:

float: left | right | none | inherit

●становится блочным (display: block)

●размер определяется объемом заключенного в него содержимого

●не участвует в Margin-colloapse (схлопывающие отступы)

●не взаимодействует с соседними блочными элементами

●обтекается строчными элементами

●по-умолчанию none — нормальный поток

●не может плавать по центру

●

Клиринг

Синтаксис:

clear: none | left | right | both | inherit

<div id="sidebar" style="float: left">This is Sidebar</div> <div id="content" style="float: left">This is Content</div> <div id="footer" style="clear: both">This is Footer</div>

Позиционирование

Синтаксис:

position: absolute | fixed | relative | static | inherit

●static: по-умолчанию — нормальный поток

●relative: относительное — от места расположения элемента

●absolute: абсолютное — от ближайшего элемента с position: relative

●fixed: фиксированное — относительно окна браузера (видимой области)

Элементам с position: absolute:

●обязательно задавать координаты

●становятся блочным (display: block)

●размер определяется объемом заключенного в него содержимого

●не участвуют в Margin-colloapse (схлопывающие отступы)

●другие элементы не видят элементов с position: absolute

Позиционирование

Позиционирование

top, right, bottom, left

Синтаксис:

top: value | percent | auto | inherit

●top: от верхнего края родительского элемента

●right: от правого края

●bottom: от нижнего края

●left: от левого края

z-index

Синтаксис:

z-index: число | auto | inherit

Если контенту мало места

Синтаксис:

overflow: auto | hidden | scroll | visible | inherit

●без overflow браузеры различно обрабатывают "переполнение" блока

●"хук" при верстке

●альтернатива position: fixed в IE6

Синтаксис:

overflow-x: auto | hidden | scroll | visible

Синтаксис:

overflow-y: auto | hidden | scroll | visible

Отображение элементов

Синтаксис:

display: block | inline | list-item | none

Остальные значения поддерживаются не всеми браузерами

Синтаксис:

display:

inline-block | inline-table | run-in |

table | table-caption | table-cell | table-column-group | table-column | table-footer-group | table-header-group | table-row | table-row-group

Подробнее на htmlbook.ru