## Введение

В конце прошлого века и самом начале нынешнего сайтостроители работали в тяжёлых условиях: медленный Интернет ограничивал творческие порывы, а каждый браузер требовал особого программирования.

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

Иными словами:

- скорость Интернета возросла;
- браузеры стали поддерживать стандарты.

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

Такой подход позволяет:

- Сократить объём HTML-кода за счёт удаления из тегов значительной части атрибутов (сокращение может достигнуть 50%).
- Уменьшить время загрузки страниц за счет того, что единственный файл CSS кэшируется браузером.
- Упростить работу по изменению внешнего вида сайта. Редактировать придётся единственный файл со стилевыми определениями, а не многочисленные файлы с кодами гипертекстовых страниц.
- Легко настраивать сайт на разные средства просмотра.
- Использовать гораздо больше свойств и значений CSS, чем это было возможно при помощи атрибутов HTML.

В заметках, представленных в пособии, рассматриваются вопросы, связанные с вёрсткой гипертекстовых страниц при помощи CSS.

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

Да, конечно, браузеры содержат ошибки. Но часто то, что принимается за ошибку, является задуманным, задокументированным и логичным поведением.

На сайтах Web-разработчиков можно, например, встретить описание «трюка» `margin: 0 auto`, при помощи которого блок центрируется по горизонтали. На самом деле, это никакой не трюк, а задокументированная стандартом и логичная функциональность.

Вот почему разработчику необходимо знать алгоритмы работы браузера, и заметки раскрывают наиболее важные из них (на взгляд автора).

В разделе «Вёрстка потоком» приводятся алгоритмы работы браузера по умолчанию.

В разделе «Позиционирование» рассмотрена вёрстка при помощи блоков, размещаемых в заданных координатах.

Раздел «Плавающие блоки» демонстрирует построение макета страницы при помощи блоков `float`.

### Шаблон HTML для проверки примеров

Примеры, которые содержатся в бумажном варианте, записаны в сокращённой форме: `<BODY>содержимое примера</BODY>`.

Полный шаблон страницы, в котором работают примеры, имеет вид:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="ru">

      <HEAD>
        <META http-equiv="Content-Type" content="text/html; charset=windows-1251">
        <META http-equiv="Content-Style-Type" content="text/css">
        <STYLE type="text/css">@import url(main.css);</STYLE>
        <TITLE>Заголовок окна</TITLE>
      </HEAD>

      <BODY>
    Содержимое примера
      </BODY>

    </HTML>

Указана кодировка `windows-1251`, а в качестве файла со стилями проставлена ссылка на файл `main.css`.

Для `DOCTYPE` выбран вариант `Transitional`.

Подробнее о декларации `DOCTYPE`