Блочная верстка. Урок 1. Блочные элементы.

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

Так какие же новые возможности привнесла новая техника?

Во-первых, как было отмечено ранее, она позволила сделать веб-документы более легковесными. Это важно. И не только из-за уменьшения трафика. Страницы, сверстанные с применением техники блочной верстки, быстрее обрабатываются браузерами. Ведь блоки могут применяться не только для содержания контента, но и для оформления. Представьте страницу, разбитую на 100 блоков, и представьте страницу, состоящую из 100 таблиц, в каждой из которой нужно еще определить строки и столбцы. И где теперь проще разобраться?..

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

Но не все так хорошо и гладко. У блочной верстки существуют и недостатки. Первый из них это то, что браузеры не придерживаются единого стандарта восприятия и отрисовки блоков. Поэтому никто не может гарантировать 100% идентичного отображения сайта в различных браузерах. Максимум, что можно сделать, это сверстать с минимальными отличиями, практически не заметными глазу. В качестве второго недостатка, можно отметить, что невозможно сделать блоки растягивающимися и одновременно одинаковыми по высоте. Но это тоже можно решить. И последний, довольно существенный недостаток, техника блочной верстки сложнее табличной.

Так что же является основой блочной верстки? Наверное, вы уже догадались. Конечно же, это блок, точнее блочный элемент. К блочным элементам относятся элементы с тегами <div> – контейнер, <h1> – <h6> – заголовки, <p> – абзац и некоторые другие.

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

У блочных элементов, как и у остальных элементов, существует набор свойств. Наиболее важными с точки зрения верстки являются свойства id – уникальное название элемента, class – определяющее некоторую общность элемента и style – определяющее уникальный стиль элемента. Все свойства задаются через атрибуты открывающего тега элемента.

В свою очередь стиль элементов также имеет довольно большое количество свойств. Для позиционирования блочных элементов, наиболее важная роль отведена свойствам margin (поле), border (рамка) и padding (отступ), менее часто используют свойства top, left, right, bottom, строго задающие позицию блочного элемента, и свойство z-index, позволяющее накладывать элементы друг на друга.

• Border – контур элемента. У этого свойства есть следующие характеристики: толщина, цвет и тип (сплошная, пунктирная и т.д.).
• Margin – внешнее поле. Его можно сравнить с полем тетрадного листа, если представить тетрадный лист как контейнер, а абзац в виде элемента, у которого задано одно из боковых внешних полей margin.
• Padding – внутренний отступ. Он отделяет содержимое блока от его рамки. Аналогично можно сравнить с отступом красной строки у абзаца, состоящего из единственной строки.

Самым важным, можно даже сказать основным элементом, в блочной верстке является контейнер DIV. Этот элемент представляет собой универсальный блок. DIV не связан ни с каким типом данных (так, как например, p - абзац и может содержать только те элементы, которые относятся к абзацу). Он может содержать абсолютно любой элемент. Именно поэтому этот блочный элемент используется для построения каркаса веб-документа.

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

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