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

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

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

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

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

Ширина и высота элементов

Для задания ширины и высоты элементов в CSS предназначены свойства width и height. Значения этих свойств, как правило, задаются в пикселях или процентах. Пиксели обозначаются как px и добавляются к числу без пробела, а проценты обозначаются символом "%". 

div {
    height: 200px;
    width: 50%;
    background-color: blue;
}

Оформление блока

По умолчанию блок div представляет собой прямоугольник, у которого можно задать рамку с помощью свойства border и цвет заполнения с помощью background. Эти свойства составные и содержат несколько аргументов, задаваемых в любом порядке:

div {
    height: 100px;
    width: 200px;
    background: blue;
    border: solid red 2px;
}

Отступы и поля

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

Отступы (margin) - это промежуток снаружи элемента за пределами любых установленных рамок, а поля (padding) - это промежуток вокруг содержимого элемента внутри любых установленных рамок.

В блочной модели поля — это расстояние между контентом (content) и границей блока (border). А отступы это расстояние между границей блока и границей соседнего или родительского элемента.

Таким образом, если граница и фон элемента не заданы, то нет разницы, использовать свойство padding или margin для задания отступов, но при условии, что ширина (width) и высота (height) элемента не заданы.

Пример применения отступов и полей

<div class="pblock">
  <div class="content">
    text text text text text text
  </div>
</div>
.pblock {
  width: 210px;
  background-color: #c5ffa0;
  border: 1px solid blue;
}
 
.content {
  background-color: #c0e4ff;
  border: 2px solid red;
  margin: 40px;
  padding: 20px
}

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

Обтекание элементов

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

Это свойство может принимать одно из следующих значений:

  • left - элемент перемещается влево, а все содержимое, которое идет ниже его, обтекает правый край элемента
  • right - элемент перемещается вправо
  • none - отменяет обтекание и возвращает объект в его обычную позицию

При применении свойства float для стилизуемых элементов, кроме элемента img, рекомендуется установить свойство width.

Элементы, к которым применяется свойство float, еще называют floating elements или плавающими элементами.

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

Свойство clear может принимать следующие значения:

  • left - стилизуемый элемент может обтекать плавающий элемент справа. Слева же обтекание не работает
  • right - стилизуемый элемент может обтекать плавающий элемент только слева. А справа обтекание не работает
  • both - стилизуемый элемент может обтекать плавающие элементы и относительно них смещается вниз
  • none - стилизуемый элемент ведет себя стандартным образом, то есть принимает участие в обтекании справа и слева

Например, обтекание блока (с картинкой) текстом можно выполнить следующим образом:

<div class="fblock"></div>
<div class="content">
  Одним из часто встречающихся свойств является float. 
  Оно позволяет делать то, что в другом случае возможно только с использование таблиц. 
  К примеру, разместить два контейнера один справа, а второй слева. 
  Это свойство сложно для освоения, но без него не обходится ни один современный сайт.
</div>
.fblock {
  float: left;
  background: blue;
  width: 200px;
  height: 100px;
  margin: 10px;
}

Результат:

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

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

Существует несколько разных типов позиционирования, которые можно применить к элементам HTML. Для активации специфического типа позиционирования у элемента, используется свойство position.

Значения position:

  • static — значение по умолчанию, элемент позиционируется в соответствии с его местом в потоке документа;
  • relative — элемент позиционируется относительно своего исходного положения в потоке документа;
  • absolute — элемент позиционируется относительно ближайшего родительского элемента, который имеет позиционирование, отличное от static;
  • fixed — элемент позиционируется относительно окна браузера;
  • sticky — элемент остаётся на месте при прокрутке страницы, но при этом может быть отодвинут от своей стандартной позиции.

Relative определяет позиционирование элемента относительно его стандартного местоположения на странице. При использовании этого значения можно задать дополнительные параметры, такие как top, bottom, left и right, которые указывают на смещение элемента относительно его стандартного местоположения.

Absolute задаёт точное местоположение элемента на странице, независимо от других элементов на странице. Фактически элемент удаляется из обычного потока документа и выноситься на отдельный слой (может наползать на другие элементы, выходить за пределы окна браузера и т.п.). Он располагается относительно своего ближайшего предка для которого было установлено явное позицирование (т.е. значение отличное от static), если такой есть; в противном случае он помещается относительно исходного содержащего его блока. Его конечная позиция определяется значениями top, right, bottom, и left.

Fixed задаёт элемент на фиксированном месте на странице, независимо от прокрутки страницы. При использовании этого значения также можно задать параметры top, bottom, left и right, чтобы определить точное местоположение элемента.

Sticky начинает себя вести как обычный элемент до тех пор, пока не достигнет определенной позиции на странице, которую вы зададите с помощью свойства top, right, bottom или left. Как только элемент достигнет этой позиции при прокрутке страницы, он зафиксируется на месте и будет оставаться там до тех пор, пока пользователь не доскроллит страницу обратно.

Пример позицонирования блоков:

<div class="gblock">
   <div class="rblock"></div>
</div>
.gblock,
.rblock {
  width: 200px;
  height: 100px;
}
 
.gblock {
    background: green;
    position: relative; /* Относительное смещение от текущей позиции*/
    top: 50px;
    left: 50px;
}
 
.rblock {
    background: red;
    position: absolute; /* Cмещение относительно родительского блока*/
    top: 50px;
    left: 100px;
}

Результат:

Направление: 
CSS