Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Параметры размеров

Параметры размеров

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

Атрибуты стиля width и height позволяют задать, соответственно, ширину и высоту элемента Web-страницы:

width: auto|<ширина>|inherit height: auto|<высота>|inherit

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

#cnavbar { width: 100px }

Можно задать относительное значение размера в процентах от соответствующего размера родительского элемента. При этом размер элемента будет изменяться при изменении размеров окна Web-обозревателя:

#cheader { height: 10 % }

Значение auto отдает управление этим размером на откуп Web-обозревателю (обычное поведение). В последнем случае Web-обозреватель установит такие размеры элемента Web-страницы, чтобы в нем полностью поместилось его содержимое, и не больше.

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

Атрибуты стиля min-width и min-height позволяют определить минимальную ширину и высоту элемента Web-страницы:

min-width: <ширина>

min-height: <высота>

Значение ширины или высоты может быть как абсолютным, так и относительным. Пример:

TABLE { min-width: 500px; min-height: 300px }

Аналогичные атрибуты стиля max-width и max-height позволяют задать максимальную, соответственно, ширину и высоту элемента Web-страницы:

max-width: <ширина>

max-height: <высота>

И здесь значение ширины или высоты может быть как абсолютным, так и относительным:

TABLE { max-width: 90 %; max-height: 60 % }

Оглавление книги