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

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

В блоковую модель входят css-свойства блока:

Режим блоковой модели задаётся через свойство box-sizing. Если оно равно content-box, то это стандартное («старое») поведение, если border-box, то это «новое» поведение.

В стандартном варианте реальная ширина и высота блока определяется суммой свойств width/height, padding, margin и border. То есть задавая width: 300px; padding: 20px;, в реальности размер блока будет не 300px, а 340px. Вот примерная схема

margin
border
padding
width

Главная проблема такой модели в том, что размеры часто нужно задавать в процентах, где неизвестна точная ширина в пикселах. Если, например нужно разместить два блока рядом по 50% с промежутком между ними, то верстальщику приходится расчитывать значения ширины, отступов и бордюра в пикселах, чтобы не превысить максимальные 100%.

В новом варианте блочной модели ширина блока задается через width, а отступы и границы образуются уже «внутрь» блока, не увеличивая реальную ширину. При этом margin задаёт непосредственно внешний отступ, не увеличивая ширину блока:

margin
width
border
padding

Почти вся современная верстка выполняется в новой модели border-box. Именно поэтому в прошлом уроке мы задали сброс «border-box».

Одной из самых распространённых задач верстки — это позиционирование блоков относительно друг друга. Например нужно разместить два блока колонками.

В HTML все тэги выводятся в обычном потоке — сверху вниз, как они заданы в коде. Когда стоит задача позиционирования блоков, то этот поток следует изменить. Делается это через css-свойство display. Мы уже знаем, что тэги бывают блочные и строчные, но на самом деле возможных значений больше и все они определяются свойством display, где описаны достаточно сложные варианты для table, flex или grid (самое новое свойство).

Раньше в CSS не было таких возможностей, поэтому была придумана верстка через свойство float. Изначально float (у него два значения left и right) был предназначен для размещения изображения так, чтобы текст его обтекал.

Nam ut sapien quis arcu ullamcorper cursus. Etiam congue. Phasellus in neque. Ut a pede ac neque mattis facilisis. In vulputate. Nulla nunc ipsum, sodales vitae, hendrerit non, imperdiet ac ante. Ut magna. Nunc id lorem. Donec vitae felis nec ligula blandit rhoncus. Morbi blandit mollis magna. Nunc fermentum convallis ligula. In vehicula. Sed libero quam, sodales eget, venenatis non, cursus vel velit. Integer iaculis pharetra eros. Sed convallis turpis a ante. Morbi sit amet mi. Cras pellentesque erat eu urna. Vestibulum tempor nisi rhoncus eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Свойство float выводит элемент из общего потока, что позволяет размещать блоковые элементы (например DIV) рядом друг с другом. Главное правило — у таких элементов должен быть общий контейнер. Рассмотрим несколько примеров.

Разместим два div-блока рядом.

1
2
<div>
	<div style="float: left; width: 50%;">1</div>
	<div style="float: left; width: 50%;">2</div>
</div>

Если убрать float, то блоки окажутся один под другим, поскольку все блочные тэги начинают вывод с новой строки.

1
2

Попробуем изменить ширину блоков так, чтобы суммарно они вышли за пределы 100%, например 3 блока по 40%.

1
2
3
<div>
	<div style="float: left; width: 40%;">1</div>
	<div style="float: left; width: 40%;">2</div>
	<div style="float: left; width: 40%;">3</div>
</div>

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

Для того, чтобы принудительно прекратить обтекание, используется css-свойство clear: both;. Но из-за особенностей его поведения, более распространено использование специального класса .clearfix (в css-фреймворках). Он применяется к основному контейнеру, после которого float перестанет работать. Классы UniCSS мы рассмотрим позже, пока просто покажу пример того как это выглядит на странице.

float: right
Suspendisse in nulla. Donec vitae felis nec ligula blandit rhoncus. Aliquam sit amet felis. Maecenas nibh eros, dapibus at, pellentesque in, auctor a, enim. In vehicula. Nulla velit. Cras malesuada. Donec viverra nibh et dolor. Sed libero quam, sodales eget, venenatis non, cursus vel, velit.

Видно, что float-элемент вышел за пределы контейнера. Это его типовое поведение. Добавим класс .clearfix:

float: right
Suspendisse in nulla. Donec vitae felis nec ligula blandit rhoncus. Aliquam sit amet felis. Maecenas nibh eros, dapibus at, pellentesque in, auctor a, enim. In vehicula. Nulla velit. Cras malesuada. Donec viverra nibh et dolor. Sed libero quam, sodales eget, venenatis non, cursus vel, velit.
В некоторых случаях, проще всего добавить пустой DIV с классом .clearfix вот такой строчкой.
<div class="clearfix"></div>

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

Более того, современная верстка постепенно переходит на grid-модель, которая предлагает ещё больше возможностей. С учётом темпа развития браузеров, в ближайшее время она станет уже привычной практикой.

Задания

1. Отредактируйте файлы предыдущего урока так, чтобы изображения получили float-свойства.

2. Сделайте к текстам несколько плавающих врезок с текстом. Для задания css используйте атрибут тэгов style.

3. Используйте в текстах свойства padding и margin.

4. Научитесь задавать цветной фон блока через свойства background.