TML, CSS, СКРИПТЫ: практика создании сайтов

Страница, использующая лист стилей

с селекторами уникальных элементов и классов

Линейные размеры элементов

Размеры элементов по умолчанию определяются контекстом

форматирования — в зависимости от того, блочным или внутристрочным является данный

Глава 4. Использование блочной модели СБ82для верстки сложных веб-страниц 181

элемент, применяются различные алгоритмы вычисления его линейных

размеров.

Так, линейные размеры блочного элемента по умолчанию определяются

шириной родительского элемента (по горизонтали) и объемом содержимого (по

вертикали), а также зависят от величин полей, отступов и толщины рамки.

Но размеры блочных элементов можно контролировать и явно — при

помощи CSS-свойств width и height, определяющих соответственно ширину и

высоту содержимого.

Значениями этих свойств могут быть величины, заданные с использованием

линейных единиц измерения или в процентах, а также ключевое слово auto.

Значение auto, используемое по умолчанию, предписывает вычислять

ширину или высоту содержимого блочного элемента с учетом значений других

свойств, влияющих на линейные размеры элемента.

Применение процентной записи сопряжено с рядом нюансов. Для свойства

width значение, заданное в процентах, однозначно определяет отношение

ширины содержимого данного элемента к ширине содержимого

родительского элемента — здесь все просто.

В случае со свойством height, однако, не все так прозрачно. Если высота

родительского элемента не определяется явно (т. е. зависит от объема

контента), то любое процентное значение будет интерпретироваться как auto.

В спецификации CSS2.1 оговаривается исключение из этого правила—

блоки, позиционированные в абсолютных координатах (см. ниже).

Спецификация CSS2.1 также оговаривает (a CSS2— неявно подразумевает), что

процентное значение высоты корневого элемента «привязывается» к высоте

области просмотра, т. е., в частном случае, окна браузера.

Чем все это нам грозит?

Верстка на основе блочной модели CSS таит в себе серьезное органическое

противоречие со «старым добрым» подходом верстать страницы при помощи

таблиц, предусмотренных в HTML (см. главу 5).

Это несоответствие, оборачивающееся для разработчиков «консервативной» и

«прогрессивной» школ настоящим яблоком раздора, заключается в

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

строку, обе ячейки при любом раскладе будут иметь одинаковую высоту.

Когда же речь заходит о CSS-верстке, мы теряем возможность «увязки» высот

соседних блоков между собой, если этот параметр не задан жестко (в

пикселах или иных линейных единицах), что при произвольном количестве

контента в блоках совершенно неприемлемо.

Разумеется, существует миллион искусственных способов создать иллюзию

равной высоты двух соседних блоков, но как раз этот самый факт чаще всего

182 Часть II. Применение веб-технологий стороны клиента для создания сайтов

рассматривается приверженцами табличной верстки в качестве

неопровержимого доказательства несовершенства блочной модели CSS. По той самой

причине, что речь идет всего лишь об искусственных способах, создающих

иллюзию, и не более того.

А если все-таки посмотреть на проблему с другой стороны? Иными словами,

так ли уж и необходимо создавать ту самую иллюзию? Полагаю, что с точки

зрения логики и здравого смысла вполне естественно, когда размеры того или

иного блока определяются количеством контента в нем. Ведь веб-страница —

это не журнальная или газетная полоса, где объем каждой колонки строго

фиксирован. Тогда зачем, спрашивается, искусственно усложнять

действительность?

Взгляните, например, на главную страницу сайта W3C (www.w3.org), где

используется верстка в три колонки. Заметьте, никаких попыток уравнять

высоту смежных колонок там не прослеживается. Множество аналогичных

примеров (включая, например, и такие сказочно красивые сайты, как

www.komodomedia.com) можно найти в галерее CSS Vault (www.cssvault.com),

которая, впрочем, сама по себе является ярким примером верстки страниц

при помощи блочной модели CSS2.

Как бы то ни было, «капризное» свойство height используется

веб-разработчиками намного реже, нежели width.