Инициальные элементы

CSS2 вводит значение run-in, еще один интересный гибрид блока/строки, который может сделать некоторые блочные элементы строковой частью следующего элемента. Эта возможность полезна для реализации некоторых эффектов, привычных в оформлении печатных текстов, когда заголовок выглядит как часть абзаца. В CSS можно сделать элемент инициальным, лишь изменив значение его свойства display и объявив следующий блок элемента структурным (block-level box). Заметьте, что я здесь веду речь о блоках, а не о самих элементах. Иначе говоря, не имеет значения, строковый это элемент или блочный. Важен только вид блока, генерируемого элементом. Элемент strong, для которого задано свойство display: block, генерирует структурный блок (block-level box); абзац, для которого задано display: inline, генерирует строковый блок (inline box).

Итак, перефразируем: если элемент генерирует инициальный блок и за ним следует структурный блок, то инициальный элемент будет строковым блоком в начале структурного блока. Например:

Run-in Elements


Another interesting block/inline hybrid is the value run-in,
introduced in CSS2, which has the ability to take block-level elements and
make them an inline part of a following element.


This is useful for certain
heading effects that are quite common in print typography, where a heading
will appear as part of a paragraph of text.



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

Run-in
Elements
Another interesting block/inline hybrid is the value
run-in, introduced in CSS2, which has the ability to take block-
level elements and make them an inline part of a following element. This is
useful for certain heading effects that are quite common in print typography,
where a heading will appear as part of a paragraph of text.



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


Дополним наш пример и введем контейнер div и какой-нибудь цвет:

Run-in Elements


Another interesting block/inline hybrid is the value run-in,
introduced in CSS2, which has the ability to take block-level elements and
make them an inline part of a following element.




В этой ситуации h3 будет серебряным, а не черным. Дело в том, что он наследует значение цвета своего родительского элемента до того, как вставляется в абзац. Важно запомнить, что run-in будет работать, только если блок, следующий за инициальным блоком, является структурным блоком. Если нет, инициальный блок сам станет структурным. Таким образом, в результате применения следующей разметки элемент h3 будет оставаться или даже станет структурным блоком, поскольку значение свойства display для элемента table (как это ни странно) – таблица:

Цены



Яблоки$0.59
Персики$0.79
Тыква$1.29
Пирог$6.99


Вряд ли автор когда-нибудь применит значение run-in к строковому элементу, но если это случится, элемент, скорее всего, сгенерирует структурный блок.


Например, элемент em в следующей разметке стал бы структурным, поскольку за ним не следует структурный блок:


Это на самом деле лишнее, но вы могли бы сделать это, если бы захотели.


На момент написания данной книги поддержку run-in предлагают лишь несколько броузеров.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Автоматическое определение высоты
Блок-контейнер
Блок-контейнер
Блочные элементы
Вертикальное выравнивание