12. Блоковая модель документа. Содержимое блока, рамки, поля и отступы. Блочные и строчные теги как элементы блоковой модели. Свойства display, overflow.

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

m argin — поле. пространство от границы текущего элемента до внутренней границы его родительского элемента.

padding — отступ. Промежуток между содержимым и его границей

border — Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрами border-top, border-bottom, border-left, border-right. border: width || style: dotted, dashed, solid, double,groove(вдавлен.), fidge(выпукл.), inset, outset, none || color

Блочные элементы создают визуально самостоятельную структурную единицу — блок(content, border, padding, margin). В общем потоке страницы располагаются один под другим, по одному в каждой строке.

Например: p, div, table, tr, td, form, h1, ol, ul

<p> — тег нового абзаца.

<h1>...<h6> — контейнерные теги шестиуровневых заголовков документа.

<ul> — маркированный список. (type="disc", "circle", "square")

<ol> — нумерованный список. (type="A, a, I, 1")

<li> — элемент списка

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

Например: a, code, img, input, span, em, b, I

display. атрибут, который определяет, как элемент должен быть показан в документе.

block Элемент показывается как блочный.

inline Элемент отображается как встроенный.

list-item Элемент выводится как блочный и добавляется маркер списка.

none Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было

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

visible — Отображается все содержание элемента, даже за пределами установленной высоты и ширины.

hidden — Отображается только область внутри элемента, остальное будет обрезано.

scroll — Всегда добавляются полосы прокрутки.

auto — Полосы прокрутки добавляются только при необходимости.

13. Понятие нормального потока. Позиционирование - статическое, абсолютное, относительное, фиксированное. Плавающая модель. Верстка многоколонного макета. Свойства position, float, clear.

Нормальный поток — это последовательность вывода блоков браузером по умолчанию, то есть когда нет никаких других схем позиционирования. Табличная верстка относится к нормальному потоку, тогда как CSS-позиционирование — нет.

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

<div> — общий блоковый элемент

<span> — общий строчный элемент

С помощью данных элементов и стилей можно создавать любые блоки, которые не предусмотрены языком HTML.

Суть позиционирования очень проста: любой бокс можно расположить в любом месте страницы, задав ему точные координаты.

position: absolute | fixed | relative | static

• static — (по умолчанию)элементы отображаются как обычно. Использование параметров left, top, right и bottom не применимы. marginы перекрываются по вертикали.

• absolute — положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера (если родительский элемент в нормальном потоке. Если же род.эл. позиционирован absolute или relative, то относительно него)

• fixed — аналогично аргументу absolute, но в отличие от него элементы неподвижны при скроллинге

• relative — Положение элемента устанавливается относительно его расположения в нормальном потоке.

При плавающей модели блок вырывается из нормального потока и смещается максимально к указанному краю предыдущего блока. Получается, что если, скажем, создать три блока, суммарная ширина которых не превышает 100%, то получится три колонки, если превышает, то «лишние» блоки окажутся на следующей строке.

float — определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. float: left | right | none. Когда значение параметра float равно none, элемент выводится на странице как обычно

clear — устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если установлено обтекание элемента с помощью параметра float, свойство clear отменяет его действие для указанных сторон. clear: both(отмена обтекания с правого и с левого края) | left | none | right

Верстка многоколонного макета может быть осуществлена с помощью таблицы и с помощью плавающей модели.

2 колонки:

#content { float:right; width:70%; }

#sidebar { float:left; width:30%; }

(в этом случае второй блок может съехать вниз, т.к. помимо элемента есть еще поля и рамки. Поэтому желательно брать суммарный процент меньше 100)

3 колонки:

#header {}

#content { float:left; width:450px; }

#sidebar { float:right; width:150px; }

#footer { clear:both; }