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

Знакомство с HTML и CSS всегда проходит более-менее на изях и позитивчике. Основная проблема - это запомнить кучу тегов и атрибутов в HTML и селекторов со свойствами в CSS. Хотя и это особо проблемой не назовешь - справочники всегда под рукой, гугл тоже не спит, следит за нами...

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

Что такое блок

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

В принципе, такую же аналогию можно провести для блочной верстки. В нашем арсенале есть теги и некоторые CSS свойства, которые в совокупности представляют собой "блок". Его можно воспринимать как строительный блок, как кирпичик. Из этих кирпичиков строится дом, то бишь, сайт. Но, в отличии от реальных строительных материалов, блоки в мире веба гибкие - их можно подстраивать и переделывать, сколько влезет, пока не выйдет что-то годное (или что требуется заказчиком, что не всегда равно "годно").

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

Что считается блоком

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

К блочным элементам относятся теги:<address>, <blockquote>, <div>, <fieldset>, <form>, <h1>,...,<h6>, <hr>, <ol>, <p>, <pre>, <table>, <ul>.

До HTML5 основным блочным элементом (можно даже сказать, универсальным) был <div>. Из него строились заголовки, меню, контент, всплывающие окна и так далее. В принципе, в современном вебе никто не запрещает верстать только дивами (имеется ввиду, блочная часть, про строчные элементы поговорим позже), однако, существует набор тегов в HTML5, который рекомендуется использовать для обозначения конкретных частей страницы. Например, тег <header> для заголовка страницы или тег <aside> для боковой панели.

В любом случае, используете вы div, или другие теги, важно помнить, из чего складывается размер блока (ширина и высота):

1) Размер самого блока с контентом (текст, картинка, ссылка). Возьмем такой кусочек кода:

<div>Я контент дивного блока</div>

Если диву не указать ширину с помощью CSS свойства "width" (что означает "width: auto"), то он растянется на всю ширину экрана или родительского блока. Однако, существуют свойства, которые этот размер меняют.

2) Поля - расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока. Задаются с помощью CSS свойства "padding".

Поля можно задать несколькими способами:

1. padding: 5px; - задает внутренние отступы сверху, справа, снизу и слева, равные 5 пикселям. Заметили, в какой последовательности я это перечислил?
2. padding: 5px 2px 3px 0; - здесь я указал конкретные отступы с каждой стороны (5 пикселей сверху, 2 пикселя справа, 3 пикселя снизу и 0 (ноль) пикселей слева, причем "ноль" можно указывать без величин).
3. padding: 10px 15px; - если у нас отступы сверху-снизу и справа-слева одинаковые, можно указать с помощью двух значений. В данном примере отступы сверху и снизу равны "10px", а слева и справа - "15px".
4. Если запомнить последовательность величин сложно, или когда не хочется указывать "нули", чтобы сделать отступ только с одной-двух сторон, нам доступны еще 4 свойства: padding-top (сверху), padding-right (справа), padding-bottom (снизу) и padding-left (слева).

Таким образом, указывая поля, мы увеличиваем размер блока. Он становится равен сумме своего собственного размера и размерам полей (например, по ширине это будет размер блока + padding-left + padding-right).

3) Границы - линии вокруг полей элемента на одной, двух, трёх или всех четырёх его сторонах. У каждой линии есть толщина, стиль и цвет.

Задается граница с помощью свойства "border". Например, код

border: 2px solid black; - добавит блоку черную (black) сплошную (solid) границу размером 2px. Как вы понимаете, каждое из значений можно указать отдельными свойствами: border-width (толщина), border-style (вид) и border-color (цвет). Кроме этого, border можно разбить на 4 отдельных свойства, аналогично padding: border-top (граница сверху), border-right (справа), border-bottom (снизу) и border-left (слева).

Таким образом, размер блока с указанными полями и границей будет равняться размеру самого блока + размер полей + ширина границы.

4) Отступы - пустое пространство от внешнего края границы, полей или содержимого блока. Так как мы можем не указать границу (border) или поле (padding), внешние отступы могут отсчитываться от разной начальной точки.

Задаются отступы с помощью свойства "margin":

margin: 10px; - внешние отступы сверху, слева, справа и снизу, равные 10 пикселям. Разбивается на 4 свойства при необходимости: margin-top, margin-right, margin-bottom и margin-left.

Таким образом, размер блока с указанными полями, границей и отступами будет равняться размеру самого блока + размер полей + ширина границы + размер отступов.

В принципе, это все составляющие блока. Предлагаю закрепить написанное вот этой картинкой:

Еще вариант блочного элемента

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

Если нам нужно явно указать, что элемент блочный, используем следующий код:

display: block;

Смысл этого способа прост - если нам нужно задать блочное поведение элементу, который по умолчанию таковым не является, используем "display: block".

Или еще такой вариант:

display: inline;

Эту запись можно использовать и для дефолтных блочных элементов. Нужна для отмены стандартного поведения этих элементов (div, p и так далее). А какое у них стандартное поведение? Размещение с новой строчки, то есть, два соседних div элемента в браузере будут размещаться друг под другом. Задав им "display: inline" свойство, мы сможем поместить их в одну строку. Однако, если содержимое одного из блоков будет слишком большим, из-за чего оба блока в сумме не будут влезать в размеры родительского элемента, второй блок автоматически перейдет на следующую строку.

Свойство "display: block" делает не блочные элементы блочными. Но какие еще бывают элементы в таком случае?

Строчные элементы

Строчными называются такие элементы документа, которые являются непосредственной частью строки. К строчным элементам относятся теги <img>, <span>, <a>, <q>, <code> и др., а также элементы, у которых свойство display установлено как inline. В основном они используются для изменения вида текста или его логического выделения.

Как вы поняли, "display: inline" делает из блочных элементов строчные, а "display: block" наоборот. Вот так и живем: есть какие-то правила, и тут же этими правилами можно подтереться средствами того же языка. Шиза и анархия.

Строчные элементы удобно использовать для изменения вида и стиля текста, в частности, отдельных символов и слов. Для этой цели обычно применяется универсальный тег <span>, который самостоятельно никак не модифицирует содержимое, но легко объединяется со стилями через классы или идентификаторы. За счёт чего с помощью этого тега можно легко управлять видом и положением отдельных фрагментов текста или рисунков.

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

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

Самое сложное во всей верстке. Хрен бы с этими блоками по отдельности - сиди, задавай им размеры, отступы, границы. Кирпичи тоже несложно слепить ( или че там с ними делают), а вот построить из них дом, да чтобы еще и не шарахнулся через 3 года - это другой вопрос.

В верстке существует такое понятие, как поток документа. Его смысл прост - все элементы на странице отрисовываются сверху вниз. Как мы написали код в HTML файле (без всяких стилей), так он и отрисуется. Однако, когда в бой вступает CSS, мы можем послать на три веселых буквы этот поток и повытаскивать из него нужные нам элементы. И делается это с помощью свойства "position".

1) position: fixed; - зафиксировать элемент на экране. Причем он всегда будет торчать на одном и том же месте, даже если изменить размер экрана и прокрутить скроллом страницу. Обычно фиксируют шапки сайтов с меню, кнопку для обратного звонка или чат с помощником.

2) position: absolute; - отличается от "fixed" тем, что двигается вместе со скроллом. На практике будет проще увидеть разницу, не беспокойтесь.

3) position: relative; - относительное позиционирование блока. Указав это значение, мы сможем двигать элемент относительно того местоположения, где он изначально находился. Что значит двигать?

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

Например, указав абсолютную позицию (position: absolute) со свойствами "top: 0" и "left: 0", мы закрепим элемент в левом верхнем углу экрана. И когда мы прокрутим страницу вниз, он пропадет из вида. Я думаю, на практике это будет гораздо понятнее.

Бонусом упомяну еще один способ вытащить блок из потока - свойство "float". Оно уже засветилось в прошлых примерах. Ему можно задать значение "left" и "right". Его смысл - сделать блок обтекаемым, чтобы другие блоки не обращали на него внимания и размещались вокруг него, то бишь, обтекали его. Подробнее можно почитать здесь.

Итого

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

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

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