Блочная верстка
.pdfВерстка с помощью слоев
Плавающие элементы
Синтаксис:
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>
clear: |
none |
clear: |
both |
clear: |
right |
clear: |
left |
Позиционирование
Синтаксис:
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