max-width

Internet Explorer		Chrome	Opera	Safari	Firefox	Android	iOS
7.0	8.0+	1.0+	4.0+	2.0+	1.0+	2.1+	2.0+

Краткая информация

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам, кроме встроенных и таблиц
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/visudet.html#propdef-max-width

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width.

По другому, свойство width устанавливает максимальные параметры ширины. Можно применять числовые значения,а так же процентные. Процентное значение вычисляется исходя из параметров родительского элемента. Если Вы укажите значение width больше чем max-width, то высота будет определятся по значению max-width. Для браузера Internet Explorer не понятно значение inherit, лучше явно задавать значения максимального размера ширины.

Свойство применимо к блочным элементам и элементам таблиц кроме тегов colgroup и col,создано в версии CSS2 но проходит валидацию согласно версии CSS3.

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

Табл. 1. Ширина элемента
Значения свойств					Ширина
min-width	<	width	<	max-width	width
		width	<	max-width	width
		width	>	max-width	max-width
min-width	>	width	>	max-width	min-width
min-width	>	width	<	max-width	min-width

Данные из таблицы следует понимать следующим образом. Если значение ширины (width) больше значения max-width, то ширина элемента принимается равной значению max-width.

Синтаксис

max-width: значение | проценты | none | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

none: Отменяет действие этого свойства.
inherit: Наследует значение родителя.

Пример

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Версия сайта для КПК</title>
 <style media="handheld">
 body {
 max-width: 320px; /* Максимальная ширина страницы в пикселах */ 
 }
 </style>
 </head>
 <body>
 <h1>Текст заголовка</h1>
 <p>Текст примера</p>
 </body>
</html>

В данном примере ширина страницы ограничена размером 320 пикселов для всех наладонных устройств. К ним относятся КПК, смартфоны и другие устройства, способные отображать HTML-документы.

Результат использования свойства max-width

Пример в действии. Свойство max-width

Текст заголовка

Текст примера

Пример 2

<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство max-width</title>
<style type="text/css">
<!--
div {
max-width:99%;
border:10px dashed;
border-color:#0ba1d5;
outline-width:thick;
outline-style:dotted;
outline-color:red;
color: yellow;
font-size: 40px;
text-decoration:blink;
}
-->
</style>
</head>
<body>
<center>
<div>Максимальная ширина = 99%</div>
</center>
</body>
</html>

Результат примера.

Объектная модель

[window.]document.getElementById("elementID").style.maxWidth

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Размеры | Добавил: free20860soft (10.07.2013)

Просмотров: 867 | Теги: свойства CSS, Размеры | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]