Раскладка в CSS: поток. Библиотека I2R. Строчные боксы, как следует из названия, это все то, что раскладывается друг за другом в строки и переносится на следующие строки, когда не хватает ширины.

Продолжение. Предыдущие материалы:

27.08.05
Автор статьи, Иван Сагалаев предупреждает, что данный материал предоставляет собой текущие заметки по теме, а не законченную работу.
Ваши комментарии и дополнения к статье приветствуются в авторском блоге Маниакальный Веблог

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

Типы боксов

Боксы, участвующие в потоке, бывают двух принципиально разных типов: строчные и блочные (”inline” и “block” в терминлогии CSS).

Строчные боксы, как следует из названия, это все то, что раскладывается друг за другом в строки и переносится на следующие строки, когда не хватает ширины. К ним относится обычный текст, теги, отвечающие за оформление текста, такие как <b>, <i>, <code>, а также картинки. Строчные боксы могу также содержать в себе другие строчные боксы. Вот пример набора строчных боксов:

Это пример длинного текста, в котором встречаются <em>всяческие <dfn>теги</dfn></em>, которые, тем не менее, <strong>нисколько не нарушают</strong> его плавного течения с переносами на следующие строки...

Кстати, те части, которые не обрамлены никаким тегами объединяются в так называемые безымянные строчные боксы (”anonymous inline box”).

Важным свойством строчных боксов является то, что у них есть свой собственный размер. Он складывается из размера шрифта (для букв), собственных размеров картинок, расстояния между строками. Это означает, что браузер при раскладке строчных боксов определяет их размер сам, без указания всяких width и height.

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

Блочные боксы (или просто “блоки”) - это прямоугольники, которые занимают по ширине все доступное им место и никуда не переносятся. А вот собственной высоты они не имеют. Их размер по высоте определяется теми боксами, которые они содержат в себе. И это - содержание в себе других боксов - их основная задача. Содержать в себе они могут и строчные боксы, и блочные.

<body>

  Какой-нибудь текст в начале.

  <h1>Заголовок</h1>

  <p>Абзац текста</p>

</body>

Здесь блочные боксы <h1> и <p> содержат в себе строчные боксы с текстом, а сами входят в другой блочный бокс, заданный тегом <body>.

Вообще, технически, если внутри блока сидят и строчные, и блочные боксы вперемешку, то все строчные объединяются в безымянные блочные боксы (”anonymous block box”). В предыдущем примере текст до заголовка как раз заключается в такой безымянный блочный бокс.

Расположение боксов

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

Проще всего с этим обстоят дела у строчных боксов. Для них существует специальное свойство - text-align, котрое бывает left, right и center. Единственное, что надо помнить, оно задается не для самих строчных боксов, а для того блока, в котором они лежат.

С блочными боксами все слегка сложнее. Первое, с чем надо разобраться - это ширина. Особенностью (полезной особенностью!) блочных боксов в прямом потоке состоит в том, что если ширина не задана явно, то она расчитывается автоматически так, чтобы бокс в точности уместился в ширину своего родителя вместе с отступами, рамками и границами. Это не то же самое, что задание ширины в 100% - тогда при наличии отступов, рамок или границ он за пределы родителя вылезет.

Из этого же следует, что выравнивание блочного бокса по горизонтали без указания ширины не имеет смысла: он и так занимает все пространство. А вот если ширину четко указать, и она будет мнеьше, чем ширина родителя, то тогда блочный бокс уже может выравниваться. Делается это, как ни странно, с помощью задания левой и правой границ (margin’ов):

margin-right:auto - выравнивание влево, margin-left:auto - вправо, margin-left:auto и margin-right:auto - по центру

То есть, принцип такой: установка боковой границы в ‘auto’ отлепляет бокс от соответствующего края и прилепляет к противоположному, если в ‘auto’ стоят обе границы - бокс выравнивается по центру. Если же ни одна из боковых границ не стоит в ‘auto’, то бокс выравнивается к тому краю, с которого идет текст в текущем языке (то есть, у нас - слева, а в арабском - справа).

Вертикальное выравнивание

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

Управление типами боксов

Тип боксов, создаваемых элементами HTML, опредеяется ими самими. Например, <p>, <h1>, <pre>, <ul>, <div> - это блочные элементы, а <b>, <i>, <span> - строчные. Если интересно, то можно посмотреть полные списки тех и других элементов. По сути же все это подчиняется обычной логике: стилевое оформление фраз - строчные элементы, а основные блоки текста - они блоки и есть. Блоки содержат строки, но не наоборот.

Однако, CSS’ом это поведение можно свободно менять. Для этого служит свойство display. Значений у него - туча.

Там есть значения, которые придают любым элементами поведение таблиц (к чему я еще вернусь в одной из следующих статей). Есть значения, имитирующие отображения элементов списков, которые создают два бокса: отдельно для текста и отдельно для значочка. И есть еще экзотика типа run-in и compact, которые работают то как блочные, то как строчные, в зависимости от окружающего контекста. Но все это либо не поддерживается многими браузерами, либо не очень ценно практически.

Остаются три очевидных и наиболее часто используемых значения: inline и block, котрые могут из любого элемента сделать строчный и блочный соответственно, а также none, который полностью устраняет элемент из отображения вместе со всеми вложенными в него другими элементами.

Таким образом, если у нас есть такой HTML:

<p>Текст с <strong>выделенным</strong> текстом внутри.</p>

… и такой CSS:

strong {
  display:block;
}

То выделенный текст вылезет из строки и начнет занимать отдельное место по вертикали:

пример текста с выделенным текстом внутри

Аналогично, можно сделать и наоборот. HTML:

<h1>Заголовок</h1>

<p>Абзац текста.</p>

CSS:

h1,p {

  display:inline;

}

И заголовок с абзацем выложены в одну срочку:

Это, в частности, широко используется для таких вещей, как раскладывание главного меню сайта, заданного с помощью списка (<ul>) в виде горизонтальной строки.

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

Предыдущие материалы:

Эта статья - часть находящегося в процессе написания цикла под рабочим названием “Учебник”. Я рекомендую ознакомиться и с другими статьями, которые можно найти в категории “Учебник“, где они сейчас собраны в обратном хронологическом порядке.

Статьи по теме:

	Библиотека Интернет Индустрии I2R.ru	Малобюджетные сайты... Продвижение веб-сайта... Контент и авторское право...
Забобрить! Блог		Поиск:	Рассылки для занятых...»

Библиотека Интернет Индустрии I2R.ru

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...