Компоновка блочных боксов

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

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

Рассмотрим следующий фрагмент HTML:

<p style="margin-bottom:40px">This paragraph has a 40px bottom margin. </p>

<p style="margin-top:20px">This paragraph has a 20px top margin. </p>

При просмотре в браузере поля схлопываются, как показано на рис. 36.1.

Рис. 36.1.  Схлопывание полей - расстояние между боксами равно 40px, а не 60px

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

Можно определить размеры блочного бокса с помощью свойств width и height. Можно также задать на них вертикальные и горизонтальные поля. Начальным значением (по умолчанию) для width и height будет auto, а начальное значение для свойств полей будет 0. Эти факторы совместно означают, что блочный бокс будет по умолчанию такой же ширины, как и его предок, как показывает рис. 36.2.

Рис. 36.2.  Блочные боксы укладываются вертикально

Компоновка строковых боксов

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

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

Строковые боксы располагаются горизонтально, или один за другим, в том порядке, в котором они появляются в разметке. В зависимости от свойства direction, строковые боксы будут располагаться либо слева направо ( direction:ltr ), либо справа налево ( direction:rtl ). Направление слева направо используется, например, для европейских языков, в то время как направление справа налево используется с такими языками, как арабский или иврит.

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

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

em {

margin: 0 2em;

padding: 0 1em;

border: 1px dotted blue;

}

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

Рис. 36.3.  Поля, заполнение и граница не применяются в точках разрыва

Вертикальное выравнивание строковых боксов в охватывающем линейном боксе определяется свойством vertical-align. Значением по умолчанию является baseline, которое означает, что строковые боксы выравниваются так, что выравниваются базовые линии их текста. Базовая линия является воображаемой линией, на которой располагаются буквы без нижних выносных элементов. Она располагается на некотором расстоянии над нижним краем линейного бокса, чтобы оставить пространство для выносных элементов прописных букв, как показано на рис. 36.4.

Рис. 36.4.  Буквы располагаются на воображаемой базовой линии

Отметим, что свойство vertical-align применяется только к строковым боксам и ячейкам таблицы, и не наследуется. рис. 36.5 показывает несколько маленьких изображений с различным вертикальным выравниванием.

Рис. 36.5. 

Когда общая ширина строковых боксов в линейном боксе меньше ширины самого линейного бокса, горизонтальное выравнивание управляется свойством text-align. При использовании text-align:justify между строковыми боксами вставляется дополнительное пространство, если потребуется, чтобы выровнять контент слева и справа. Это свойство применяется к блочным боксам, ячейкам таблицы и наследуется - рис. 36.6 показывает результат применения различных значений свойства text-align к тексту в ячейках таблицы.

Рис. 36.6.