Интернет технологии -> CSS -> Каскадные Таблицы Стилей. Учебник.

Свойства блоков

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

Блок текста обладает свойствами: высоты(height), ширины(width), границы(border), отступа(margin), набивки(padding), произвольного размещения(float), управления обтеканием(clear).

Графически свойства можно представить следующим образом:

В данном примере внутри окна браузера расположен блочный элемент(DIV), внутрь которого помещен еще один блочный элемент(P). DIV имеет белый фон и границу. Параграф имеет границу и желтый фон.

С шириной и высотой блока текста более или менее все понятно. Задаваться они могут в типографских пунктах(pt), пикселях(px) и условных единицах(em):

<div style="width:200px;">пиксели</div>
<div style="width:200pt;">типографские пункты</div>
<div style="width:5em;">условные единицы</div>

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

Расстояние от границы блочного элемента до границы вложенного в него блочного элемента назыается padding. В терминологии данного учебного пособия для обозначения данного свойства употребляется слово "набивка" или словосочетание "внутренний отступ".

Отступ от "набивки" внешнего блочного элемента до границы вложенного элемента называется margin. Для его обозначения мы будем употреблять термин "отступ" или словосочетание "внешний отступ".

Таким образом, padding и margin характеризуют отступы блочного элемента относительного начала его содержания и относительно границы охватывающего его элемента разметки соответственно:

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

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

"Плавающий" текстовый блок позволяет реализовать возможность обтекания этого блока текстом:

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

CSS позволяет реализовать выравнивание блока текста не только по краю страницы, но и по центру(только в NN).

Блок разместился по центру страницы, если страница просматривается в NN. CSS не поддерживает значение атрибута float равным center.

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

далее...