Min-width, max-width, min-height, и max-height

Время от времени, встречаются ситуации, когда необходимо ограничить размер элемента — обычно, чтобы гарантировать, что столбец с пропорциональными размерами всегда будет сохранять удобочитаемую ширину. Различные min- и max- свойства отвечают этим требованиям. Как и в случае со свойствами width и height, результаты, которые можно ожидать от использования этих свойств, как правило, вполне предсказуемы.

Однако, по опыту автора, эти свойства имеют ограниченное применение (хотя другие авторы с этим не согласны). Как обычные старые width и height, они зависят от ошибок округления, которые могут создавать совершенно непредсказуемые результаты. Более важно то, что они совершенно не поддерживаются в браузере IE 6, который в июле 2008 г. все еще удерживал значительную долю рынка.

Пример 4

Поля auto были размещены справа и слева в контейнере страницы. Теперь необходимо, чтобы width (ширина) для этих значений полей создавало какой-то смысл. Более того, планируется присвоить цитате (pullquote) значение float, поэтому она тоже получает некоторую ширину.

Изменяем ширину контейнера документа и цитаты.

Новые правила:

#main { width: 42em; }

.pullQuote { width: 14em; }

Переполнение: ограничение в контенте, или задание свободным

Когда задано свойство элемента width или height, необходимо иногда рассмотреть, какие требуются результаты в том случае, когда контент этого элемента занимает большее пространство, чем доступно. Это особенно касается сайтов с контентом, генерируемым пользователями, и строгими спецификациями компоновки.

Для обработки таких ситуаций предназначено свойство overflow и четыре его допустимые значения - visible, hidden, auto, и scroll. Рисунок .305 показывает результат, который они создают при применении к элементу, контент которого выходит за пределы своего ограничивающего бокса.

Рис. 30.5.  Результаты использования свойства CSS overflow.

Результаты четырех значений overflow

visible (по умолчанию)	Контент за пределами допустимых размеров элементов выводится, не оказывая влияния на поток или поля смежных элементов. Следовательно, контент одного элемента может выводиться вперемешку с контентом его соседей. Методы для исключения такого результата и для специальных случаев, вызываемых проблемами представления в браузере IE, рассматриваются в следующих лекциях.
hidden	Весь контент, который находится за рамками элемента, будет скрыт от просмотра.
auto	Размеры элемента будут ограничены, как в случае использования значения hidden, но в случае необходимости создаются полосы прокрутки, чтобы сделать невидимый контент доступным посетителю.
scroll	В элемент будут встроены вертикальная и горизонтальная полосы прокрутки, даже если они не нужны.

Боксовые модели css: подгонка друг к другу

Теперь, когда фундаментальные свойства компоновки были рассмотрены, пришло время показать, как ширина элемента выводится в браузере согласно его свойствам CSS — и как удержать элементы от разрушения создаваемых компоновок. Некоторые результаты имеют вполне здравый смысл, в то время как другие могут показаться совершенно противоречащими интуиции. Чтобы усложнить ситуацию, на самом деле рассмотрения требуют два алгоритма компоновки: модель, определенная консорциумом WWW (W3C) в Рекомендации CSS 2.1, и модель, которая используется в более старых версиях браузера IE.