html.okpython.net
Основы создания сайтов
CSS :: Свойство max-width
css-свойство max-width (от англ. maximum width – максимальная ширина) по умолчанию устанавливает макисмально допустимое значение ширины области содержимого элемента. В обычной ситуации, когда значение свойства width не превышает максимально допустимого значения, используется значение width. Если же значение ширины превысит максимально допустимое значение, будет использовано значение свойства max-width (свойство width при этом будет игнорироваться).
Характеристики
- Значение по умолчанию: none.
- Применяется: ко всем элементам, кроме строчных элементов, строк и групп строк таблицы.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.maxWidth="value".
Синтаксис
max-width: <размер> | <проценты> | none
Значения
- размер – любые доступные в CSS единицы измерения (смотреть). Отрицательные значения не допускаются.
- проценты – максимальная ширина элемента вычисляется в процентах относительно ширины родительского элемента либо окна браузера при отсутствии такового.
- none – отменяет действие свойства.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css2/visudet.html#propdef-max-width
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/max-width
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 400px; height: 100px; margin: 10px; padding: 10px; border: 10px solid green; } .p_1{max-width: 500px;} .p_2{max-width: 200px;} </style> </head> <body> <p class="p_1"> width: 400px;<br> max-width: 500px;<br> Используется width. </p> <p class="p_2"> width: 400px;<br> max-width: 200px;<br> Используется max-width. </p> </body> </html>
Пример №1