Минимальные и максимальные размеры элемента.

Дата добавления: 2015-07-09; просмотров: 498; Нарушение авторских прав

Так как размеры элемента по умолчанию регулируются исключительно вложенным в него содержанием, текстом, графикой.. и т.д. то элементы становятся, вернее, остаются "резиновыми" и это хорошо! Но хорошо не во всех случаях.. иногда требуется ограничить эту "резиновость" конкретными размерами. Например, указать ячейке таблицы, что ты мол, независимо от твоего содержания, можешь быть по высоте не менее 50 пикселей, но и не более 200 пикселей.. определить, так сказать, диапазон её высоты или ширины.

Ниже перечисленные свойства CSS позволяют определить минимальные и максимальные размеры того или иного элемента

· max-height - максимальная высота элемента

· max-width - максимальная ширина элемента

· min -height - минимальная высота элемента

· min-width - минимальная ширина элемента

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Минимальные и максимальные размеры элемента</title>
</head>
<body>
<div style="min-height: 50px; min-width: 100px; max-height: 250px; max-width: 300px; border: solid 2px #dddddd">
Браузер Internet Explorer игнорирует свойства css min-width, max-width, min-height и max-height.
</div>
</body>
</html>

Полезные советы:

Как Вы уже поняли не все браузеры одинаково интерпретируют как HTML теги, так и свойства CSS. Особым "невежеством" по отношению как к пользователям так и к веб дизайнерам отличился Internet Explorer 6 и его более ранние версии.. Впрочем, и в остальных браузерах далеко не всё проходит гладко. Отсюда необходимо сделать вывод, что прежде чем выкладывать ту или иную страницу в Интернет её необходимо просмотреть (протестировать) в различных браузерах и их версий. А совет заключается собственно в том, что хорошо бы было их иметь под рукой - в установленном виде на Вашем компьютере. Соберите свою "коллекцию" браузеров.

<== предыдущая лекция	\|	следующая лекция ==>
Управление содержанием элемента.	\|	Поля и отступы.