max-width | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
7.08.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 1CSS 2CSS 2.1CSS 3

Описание

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

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

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

Синтаксис

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

Значения

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

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

Пример

HTML5CSS2.1IECrOpSaFx

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

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

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

[window.]document.getElementById(«elementID»).style.maxWidth

Браузеры

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

Размеры

CSS по теме

  • max-width

Статьи по теме

  • Резиновый двухколоночный макет
  • Резиновый трёхколоночный макет

Рецепты CSS

  • Почему max-width не работает для таблицы?

CSS max-width

HTML5CSS. ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Полный CSS Справочник Дальше ❯


Пример

Задайте максимальную ширину элемента <p> до 150 пикселей:

p.ex1 {
    max-width: 150px;
}

Подробнее примеры ниже.

Определение и использование

Свойство max-width определяет максимальную ширину элемента.

Если размер содержимого превышает максимальную ширину, он автоматически изменит высоту элемента.

Если содержимое меньше максимальной ширины, свойство

max-width не имеет эффекта.

Примечание: Это предотвращает значение свойства Width, превышающее max-width. Значение свойства max-width переопределяет свойство Width.

Значение по умолчанию:none
Inherited:no
Animatable:yes, see individual properties. Читайте о animatable
Version:CSS2
Синтаксис JavaScript: object. style.maxWidth=»600px»

Поддержка браузера

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

Свойство
max-width1.07.01.02.0.27.0

Синтаксис CSS

max-width: none|length|initial|inherit;

Значения свойств

ЗначениеОписание
noneНет максимальной ширины. Это значение по умолчанию
lengthОпределяет максимальную ширину в пикселах, см и т. д. читать о единицах длины
%Определяет максимальную ширину в процентах от содержащего блока
initialПрисваивает этому свойству значение по умолчанию. (Читайте о initial)
inheritНаследует это свойство из родительского элемента. (Читайте о inherit)

Другие примеры

Пример

Установите максимальную ширину элемента <p> до 50% контейнера:

p.ex1 {
    max-width: 50%;
}

Похожие страницы

CSS Справочник: CSS Height and Width

CSS Справка: min-width Свойство

HTML DOM Справочник: maxWidth Свойство

❮ Назад Полный CSS Справочник Дальше ❯

Популярное CSS

css текст
блоки css
css картинки
как сделать css
цвета css
шрифты css
css стили
елементы css
фон css
кнопки css
таблица css
размер css
ссылки css
изображение css
выравнивание css
внешние отступы css
внутренние отступы css
списки css
css ширина
css при наведении
css формы

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

Свойство CSS max-width

❮ Назад Полное руководство по CSS Далее ❯


Пример

Установите максимальную ширину элемента

в 150 пикселей:

p.ex1 {
  max-width: 150px;
}

Попробуйте сами »

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Свойство max-width определяет максимальную ширину элемента.

Если содержимое превышает максимальную ширину, оно автоматически изменится высота элемента.

Если содержимое меньше максимальной ширины, свойство max-width не имеет никакого эффекта.

Примечание: Это предотвращает значение свойство ширины не становится больше, чем максимальная ширина . Значение max-width свойство переопределяет свойство ширины.

Значение по умолчанию: нет
Унаследовано: нет
Анимация:
да, см. отдельные свойства . Читать о анимированном Попробуй
Версия: CSS2
Синтаксис JavaScript: объект .style.maxWidth=»600px» Попробуй

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Недвижимость
максимальная ширина 1,0 7,0 1,0 2.0.2 7,0

Синтаксис CSS

max-width: none| длина |начальный|наследовать;

Значения свойств

Значение Описание Демо
нет Нет максимальной ширины. Это по умолчанию Играй »
длина Определяет максимальную ширину в пикселях, см и т. д. Подробнее о единицах длины Играй »
%
Определяет максимальную ширину в процентах от содержащего блока Играй »
начальный Устанавливает для этого свойства значение по умолчанию. Читать про начальный
унаследовать Наследует это свойство от родительского элемента. Читать о унаследовать

Другие примеры

Пример

Установите максимальную ширину элемента

равной 50% контейнера:

p.ex1 {
максимальная ширина: 50%;
}

Попробуйте сами »

Связанные страницы

Учебник CSS: высота и ширина CSS

Справочник по CSS: свойство min-width

Справочник по HTML DOM: свойство maxWidth

❮ Предыдущий Полное руководство по CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3. CSS
Учебное пособие по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Лучшие ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top4 Examples Примеры HTML

Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

максимальная ширина | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

Свойство max-width в

CSS используется для установки максимальной ширины указанного элемента. Свойство max-width переопределяет свойство width , но min-width всегда будет переопределять max-width независимо от того, следует ли он до или после width в вашем объявлении. Авторы могут использовать любые значения длины, если они являются положительным значением.

 .обертка {
  ширина: 100%;
  максимальная ширина: 20em; /* Будет МАКСИМУМ шириной 20em */
}
. обертка {
  минимальная ширина: 50em; /* Переопределяет максимальную ширину */
  ширина: 100%;
  максимальная ширина: 20em; /* Будет МАКСИМУМ шириной 20em */
} 
 Проверьте эту ручку!
 Будьте внимательны, принимая  max-width  наследуется, так как это свойство не наследуется от других родительских элементов. Если ширина   300 пикселей была определена с максимальной шириной   600 пикселей, начальное значение ширины   всегда будет переопределять значение максимальной ширины   600 пикселей.
 Поддержка браузера 
32222222222222222222222222222222222222222222222222222222222н.0044
 IE EDGE Firefox Chrome Safari Opera
 All All All All All
 Android Chrome Android Firefox Android Browser iOS Safari Opera Mobile
 All Все Все Все Все
 Источник: caniuse