Блочная модель

Блочная модель

Доброго времени суток! Сегодня мы с вами разберем то, как строится блочная модель в html/css и как это работает. Если раньше сайты верстали на основе таблиц, то все было предельно понятно, что за определенные части страницы у нас отвечали ячейки таблицы. В блочной же модели, как вы, наверное, догадались за конкретные области отвечают блочные элементы, такие как, например, div. Чтобы понять, как примерно все должно работать, достаточно представить блоки div, как некоторые кирпичики или детальки из всеми нами знакомого конструктора LEGO. Причем блоки div – это не обязательно один кирпичик или деталька, в нем может быть еще одна или несколько подобных моделей.

Продемонстрирую сразу, что у нас должно получиться в итоге:

Типовая блочная структура, на основе которой можно построить любую модель. Разберем то, что мы видим на рисунке:

  • HEADER – шапка сайта
  • SIDEBAR – левая колонка (где может быть навигация, например)
  • CONTENT – основная часть страницы
  • FOOTER – подвал (копирайты, дублирующая навигация и т.д.)

Я не буду касаться сейчас фиксированной или резиновой модели, хотя все же стоит объяснить, что это такое.

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

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

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

<title>Блочная модель</title>       
<script type="text/javascript">
     SyntaxHighlighter.all();
</script>
<script type="text/javascript" src="http://mysite.ru/assets/components/tickets/jsjquery.markitup.js"></script>
<script type="text/javascript" src="http://mysite.ru/assets/components/tickets/jsscript>
<script type="text/javascript">
    if(typeof jQuery == "undefined") {
        document.write("<script src=\"/assets/components/userprofile2/jsjquery.min.js\" type=\"text/javascript\"><\/script>");
    }
</script><script src="http://mysite.ru/assets/components/userprofile2/jsjquery.min.js" type="text/javascript"></script>
 
<script type="text/javascript" src="http://mysite.ru/assets/components/userprofile2/jsscript>

В первой строчке мы указываем тип и спецификацию документа. В данном случае – HTML5. Далее идет открывающийся тег начала HTML документа. Между тегами <head></head>, кто знает английский поймет, голова документа, где находится метаинформация о документе (заголовок, подключенные стили CSS, подключенные скрипты, meta-теги и много чего еще полезного). <body></body> — тело документа, здесь хранится его разметка, то есть, грубо говоря, скелет того, что мы видим на страницах сайтов. Далее документ закрывается тегом </html>. Копируем этот текст в блокнот или NOTEPAD++ и сохраняем где хотим в формате *.html.

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

<div class="”header”"></div>

Я сразу присвоил ему класс, чтобы к нему можно было обратиться в таблице стилей CSS. В head после тега <title></title> добавим тег <styles>, где мы будем прописывать стили наших блоков:

<title>Блочная модель</title>
<style>
html,body,div{
   padding:0;
   margin:0;
}
.header{
   width: 100%;
   height: 100px;
   background: #f00;
}
</style>

Я сразу добавил стили к нашей шапке и обнулил стандартные отступы у всех наших элементов, что они означают:

  • Padding: 0 – убираем внутренние отступы.
  • Margin: 0 – убираем внешние отступы.
  • Width: 100% — ширина блока равна всей ширине документа.
  • height: 100px – высота равна 100 пикселям (чтобы мы могли его увидеть).
  • background: #f00 – цвет красный.

Посмотрим, что у нас получилось, открыв наш документ с помощь. Браузера:

Дальше создаем еще два элемента: SIDEBAR и CONTENT:

<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>

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

И придадим стили нашим блокам:

<style>
html,body,div{
     padding:0;
     margin:0;
}
.header{
     width: 100%;
     height: 100px;
     background: #f00;
}
.sidebar{
     width: 25%;
     height: 400px;
     background: #0f0;
     float: left;
}
.content{
     width: 75%;
     height: 400px;
     background: #00f;
     float: left;
}
</style>

Здесь свойства аналогичные первым, но добавилось новое – float: left – обтекание справа. Сейчас у нас блоки стоят так, как нужно:

Но если мы уберем свойство float: left у обоих элементов, то получим, что блоки стоят друг над другом. Можете сами поэкспериментировать.

Ну, что ж, у нас остался последний элемент – FOOTER. Привожу его код HTML:

<div class="header"></div>
<div class="sidebar"></div>
<div class="content"></div>
<div class="footer"></div>

И CSS:

<style>
html,body,div{
     padding:0;
     margin:0;
}
.header{
    width: 100%;
    height: 100px;
    background: #f00;
}
.sidebar{
    width: 25%;
    height: 400px;
    background: #0f0;
    float: left;
}
.content{
    width: 75%;
    height: 400px;
    background: #00f;
    float: left;
}
.footer{
    width: 100%;
    height: 100px;
    background: #f00;
    clear: both;
}
</style>

Здесь, вместо float: left у нас clear: both – сбрасывание обтекания. Если не будет этого свойства, наш блок склопнется и встанет под header, как будто нет sidebar и content. Поэтому обязательно необходимо сделать сбрасывание.

Полный код:

<title>Блочная модель</title>
<style>
html,body,div{
padding:0;
margin:0;
}
.header{
width: 100%;
height: 100px;
background: #f00;
}
.sidebar{
width: 25%;
height: 400px;
background: #0f0;
float: left;
}
.content{
width: 75%;
height: 400px;
background: #00f;
float: left;
}
.footer{
width: 100%;
height: 100px;
background: #f00;
clear: both;
}
</style>
 
 
  <div class="header"></div>
  <div class="sidebar"></div>
  <div class="content"></div>
  <div class="footer"></div>

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *