Позиционирование блоков | Все что вы хотели знать о хостинге и сайтостроении

Позиционирование блоков


Рубрика: CSS

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

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

  • Относительное позиционирование
  • Абсолютное позиционирование
  • Нормальный поток
  • Плавающая блоковая модель

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

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

При позиционировании блоков важно учитывать параметры устройств, на которые будут выводиться эти блоки. Если раньше WEB-разработчики ориентировались на минимальное разрешение 800*600, то активное распространение смартфонов, на которых можно просматривать web-страницы, ставит новые задачи – адаптацию сайтов под экраны мобильных гаджетов.

Позиционирование в CSS существенно рознится с позиционированием в HTML. Так, в HTML для позиционирования использовались таблицы. Этот искусственный прием имеет как свои преимущества, так и недостатки. Преимущество, прежде всего, состоит в том, что использование таблицы позволяет располагать элементы в ячейках и тем самым позиционировать их достаточно легко. По табличной верстке на сегодняшний день создана масса учебной литературы, что позволяет при желании освоить данный метод довольно быстро. Таблицы отображаются разными браузерами практически одинаково. А это значит, что разработчику не надо трудиться над созданием кроссбраузерного кода.

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

Web-разработчикам, которые уже успели набить руку в табличной верстке, переход на CSS-позиционирование может даться очень непросто – ведь это иной подход, иное мышление. И в этом плане web-дизайнеры новички, не успевшие усвоить табличные стереотипы, находятся в более выигрышном положении.

Многие специалисты пророчат CSSP (CSS-позиционированию) полное вытеснение табличной верстки. Эти выводы базируются на нескольких фактах. Во-первых, при CSSP происходит разделение структуры и внешнего вида документа. Во-вторых, CSSP позволяет создать шаблон, на основе которого изменением таблицы стилей можно получать уникальные дизайны разных сайтов. Причем при таком подходе можно менять не только оформление блоков, но и само их расположение на странице. В-третьих, при CSS программировании получается компактный код, который позволяет быстро отображать страницы при их загрузке браузером. Такой код выглядит логичнее, его проще анализировать и редактировать.

Если вам понравилась статья или была полезна, поделитесь ею с друзьями: