... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Схемы позиционирования. Нормальный поток (стр.1)

 

 

Позиционирование блоков ||  Нормальный поток ||  Свойства position ||  Фиксированные блоки ||  Плавающие блоки


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

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

По своей сути нормальный поток ничем не отличается от позиционирования в чистом языке HTML. Если некий элемент расположен в коде раньше другого, то и на странице он будет находиться ближе к верху страницы, чем следующий за ним. С помощью нормального потока невозможно реализовать сложную верстку, если не использовать HTML-таблицы. Без таблиц мы можем немногое, но, тем не менее, создать простую Web-страницу, дневник on-line или просто оформить некий перечень, например, статей или публикаций, вполне можно. Иначе говоря, при использовании схемы нормального потока мы можно реализовать структуру из следующих друг за другом сверху вниз элементов, размещаемых в одну колонку.

Приведем небольшой пример. В последнее время все чаще встречаются домашние страницы пользователей, оформленные как дневник on-line. Чаще всего такие страницы создают люди, которые находятся далеко от своего дома, - например, те, кто уехал за границу учиться или работать. Чтобы родственники могли быть в курсе их дел, они ведут дневник и публикуют его в Web.

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

Центрирование в нормальном потоке

При верстке в одну колонку ее чаще всего на странице центрируют. Однако центрирование в CSS не так просто реализовать, как кажется на первый взгляд. Свойство text-align:center, к примеру, должно центрировать содержимое блока, но не сам блок относительно контейнера.

Создадим простой блок шириной 300 пикселей с тонкой черной рамкой и попробуем его отцентрировать средствами CSS.

#block {
border:1px black solid;
.text-align:center; width:300рх;
}
<DIV id="block">
Хотелось бы отцентрировать не содержимое этого блока, а весь блок целиком.
</DIV>

При этом, если пользоваться свойством text-align:center, сам блок будет располагаться у левого края окна, а отцентрирован будет текст внутри блока. Нам же необходимо, чтобы текст оставался выровненным по левому краю, а блок центрировался. Как же это осуществить?

Самое время вспомнить о значении auto свойства margin. По спецификации CSS, как вы помните, для значения auto размеры полей вычисляются особым образом. Так вот, если для элементов уровня блока в нормальном потоке оба свойства margin-right и margin-left принимают значение auto, то их вычисляемые значения будут одинаковы.

Что это значит для нас? Когда левое и правое поля будут совпадать? Когда блок центрирован! Именно этого мы и добивались, не так ли? Перепишем правило для блока.



#block {
border:1px black solid;
margin-right:auto;
margin-left:auto;
text-align:left;
width:300рх; }

Эту запись можно оптимизировать, убрав значения по умолчанию (text-align:left) и воспользовавшись стенографическим свойством margin. Результат наших усилий представлен на рисунке.

#block {
border:1px black solid; margin:0 auto; width:300px; }

Xотелось бы отцентрировать не содержимое этого блока, а весь блок целиком.

 

Позиционирование блоков ||  Нормальный поток ||  Свойства position ||  Фиксированные блоки ||  Плавающие блоки

 

Страница: - 1 - | - 2 - | - 3 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены