Блочная модель в CSS онлайн урок.


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

В качестве блоков используют блочные элементы - как правило, это <div> или эквивалентные им. Например, для того чтоб задать основную структуру макета, можно использовать следующие блоки:



box
Тут в основной блок класса container были вставлены составные части макета - шапка header, меню menu, основное содержимое content и подвал footer. Каждый из этих блоков должен обладать специальными стилевыми правилами для достижения желаемого макета.

В HTML 5 существуют специальные теги, которые заменяют собой блоки с распространенными названиями классов, например <footer>, <header>, <nav>.

Для того, чтобы при помощи CSS изменить тип отображения тега (блочный или строковый, например) используется свойство display. Основными значениями этого свойства являются:

  • block - элемент отображается как блочный

  • inline - элемент отображается как строковый

  • list-item - элемент отображается как элемент списка и к нему добавляется маркер списка

  • none - элемент не отображается на веб-странице (так, если бы его не было вообще).




.foo {
display: block;
}


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

Проверьте свои знания
Разместить в документе index.html блоки div так, чтоб блок container содержал теги header, navigation, content, footer, которые идут по порядку. В каждом из тегов header, navigation, content, footer создать тестовый контент содержащий название идентификатора.