Блочная вёрстка

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

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

Самый распространённый блочный элемент - это div. Важно научиться управлять им при помощи CSS, чтобы построить сайт с нужной структурой.

Чтобы блок не занимал всё доступное место, ему присваиваются размеры при помощи свойств width и height.

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


#parent1{
  width: 500px;
  background: orange;
  
}

.child_block1 {
  width: 250px;
  height: 50px;
  background: red;
  margin: 5px;
}
1
2
3

Чтобы работать с конкретными блоками, используют стилевой класс или идентификатор. Они добавляются в разметку с помощью атрибутов class и id, а значением выступает произвольное имя с английской буквы, после которой можно использовать цифры, дефис и знак нижнего подчеркивания. Для уникального блока используют идентификатор (шапка, контент, подвал, как правило они сущуствуют в одном экземпляре), а для нескольких блоков с одинаковыми стилями используют стилевые классы.

Кстати, одному блоку можно через пробел задать несколько классов:



Блок с тремя классами

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

Как разместить блоки на одной линии? У нас есть контейнер шириной 500 пикселей. Нам нужно разместить 3 блока шириной по 150 пикселей, чтобы они располагались на одной горизонтальной линии. Есть два способа.

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


#parent2{
  width: 500px;
  background: orange;
  
}

.child_block2 {
  width: 150px;
  height: 50px;
  background: red;
  margin: 5px;
}

.inline{
  display: inline-block;
}

<div id="parent2">
<div class="child_block2 inline">1</div>
<div class="child_block2 inline">2</div>
<div class="child_block2 inline">3</div>
1
2
3

Мы добавили новый класс inline и прописали для него правило inline-block, чтобы преобразовать элементы в строчно-блочные. Они не теряют своих свойств, но могут располагаться в линию, если им хватает ширины в родительском контейнере.

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


.inline{
  float: left;
}

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


#wrapper1{
  max-width: 500px;
  background: orange;
}

#content1{
  width: 66%;
  background: red;
  float: left;
}

#sidebar1{
  width: 26%;
  background: blue;
  float: left;
}

<div id = "wrapper">
<div id = "content"></div>
<div id = "sidebar"></div>
</div>
Content
Sidebar

Обратите внимание, что в сумме 66% и 26% не дают 100%, мы оставили немного на всякий случай (отступы). Теперь блоки ведут себя в контейнере динамически. Это простейший принцип резиновой вёрстки.

Реклама