Размещение элементов на странице

⇐ ПредыдущаяСтр 15 из 36Следующая ⇒

Роль CSS не сводится только к «украшательству» элементов web-страницы. Каскадные таблицы стилей используют для создания макета, другими словами, базовой структуры страницы. Далее ознакомимся с основными принятыми в CSS способами упорядочения элементов: свободным размещением (float–ing) и позиционированием (positioning).

Далее будем рассматривать свойства, с помощью которых будем управлять положением элементов на web–странице с помощью CSS:

Float bottom display

Clear top position

Left bоttоm right

Z–indех

Нормальный поток

В нормальном потоке документа (normalflow) текстовые элементы страницы ведут себя следующим образом: блоковые элементы следуют друг под другом, а внутристрочные – заполняют доступное им место.

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

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

Float

Свойство float позволяет сделать элемент плавающим, смещая его к левому или правому краю родительского элемента в зависимости от того, установлено значение left или right, и обеспечивая обтекание текста вокруг элемента. Если для плавающего элемента не установлено значение свойства width, то он сжимается по ширине до размеров содержимого.

Принимаемые значения:

left – элемент прижимается к левому клаю элемента;

right – элемент прижимается к правому краю элемента;

none - элемент не является плавающим и будет отображен там, где он расположен в документе (значение по умолчанию);

inherit - значение наследуется от родительского элемента.

Пример.

img {float: right;

margin: 20px; }

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

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

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

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

Примечание.

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

2. К элементам с абсолютным и фиксированным позиционированием применять свойство float бессмысленно.

3. Свойство float элемента img фактически подменяет признанный устаревшим атрибут align. Вместо устаревших атрибутов hspace и vspace следует использовать CSS свойство margin.

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

Свободно размещенные элементы не входят в поток нормального расположения документа, но влияют на прочие элементы, когда те форматируются для вывода. Их можно сравнить «островами» в потоке, которые заставляют «обтекать» их самих.

С помощью свойства float можно сделать плавающим любой мыслимый элемент (абзац, список, элемент div и т. д.). Свободное размещение – это уникальная функция с богатыми возможностями использования. Это - один из основных инструментов современного Web–дизайна, основанного на технологии CSS. Свободнымое размещение элементов используют при создании документов с несколькими колонками текста, панелей навигации из маркированных списков, напоминающего таблицу выравнивания, а также при разработке других дизайнерских решений.

Clear

Свойство clear указывает, с какой стороны текущего элемента не допускается размещение плавающих элементов, то есть таких, у которых свойство float принимает значение right или left.

Принимаемые значения: left, right, both, none, inherit:

left – запрещены плавающие элементы с левой стороны;

right - плавающие элементы запрещены с правой стороны;

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

none - наличие плавающих элементов разрещено с обеих сторон;

inherit - значение наследуется от родительского элемента.

Пример. В даном примере (рис. 46) заголовки первого уровня начинаются в документе ниже, чем расположенное у левого края изображение, являющееся свободно размещенным элементом: img {flоаt: lеft; mаrgin–right: 10рх; } h1 {сlеаr: lеft; margin–top: 2em; }

Рисунок 46– Заголовок нового параграфа располагается на новой строке

Position

C помощью свойства position можно указать четыре типа позиционирования: stаtiс, relаtive, absоlute, fixеd. Значением по умолчанию является static.

Принимаемые значения:

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

relative – элемент с относительным позиционированием остаётся в нормальном потоке документа. Если для элемента задано смещение, элемент размещается относительно его текущей позиции, но на его исходном местоположении на веб-странице остаётся пустое пространство.

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

fixed – при фиксированной позиции элемент также исключается из потока документа, но его расположение определяется относительно не родительского элемента, а порта просмотра (чаще всего это окно браузера).

⇐ Предыдущая 10 11 12 13 141516 17 18 19 Следующая ⇒