Свойство min-width
Свойство min-width устанавливает минимальную ширину элемента. Значением свойства служат любые единицы для размеров либо ключевое слово none , означающее отсутствие значения.
Обычно задается для элемента с плавающей шириной (ширина задана в процентах или не задана вообще, а элемент по ширине раздвигается своим содержимым). Если ширина элемента задана в процентах — при уменьшении окна браузера она будет уменьшаться, пока не достигнет значения min-width .
Синтаксис
Пример
В данном примере ширина составляет процент от ширины родителя. Уменьшите окно браузера по ширине, и контейнер тоже уменьшится, чтобы подстроиться под ширину окна браузера. Однако он будет уменьшаться только до величины, определенной в min-width , это 400px . Как только контейнер достигнет этой ширины — он перестанет уменьшаться:
Пример
В данном примере ширина контейнера ограничена с обоих сторон: он не сможет стать больше 900px и меньше 400px :
Смотрите также
- свойство max-width ,
которое задает максимальную ширину элемента - свойство max-height ,
которое задает максимальную высоту элемента - свойство max-height ,
которое задает минимальную высоту элемента
min-width¶
Свойство min-width устанавливает минимальную ширину элемента.
Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width , max-width и min-width .
Если значение ширины ( width ) меньше значения min-width , то ширина элемента принимается равной min-width .
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
/* value */ min-width: 3.5em; /* value */ min-width: 10%; /* Keyword values */ min-width: max-content; min-width: min-content; min-width: fit-content; min-width: fill-available; /* Global values */ min-width: inherit; min-width: initial; min-width: unset; Значения¶
В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
auto Минимальная ширина для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.
max-content Внутренняя предпочтительная ширина.
min-content Внутренняя минимальная ширина.
fill-available Ширина родительского блока минус горизонтальные margin , border , и padding . (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова available .)
fit-content Определяет как min(max-content, max(min-content, fill-available)) .
min-width: auto; Применяется ко всем элементам, кроме строчных и таблиц
Спецификации¶
- CSS Intrinsic & Extrinsic Sizing Module Level 3
- CSS Level 2 (Revision 1)
Поддержка браузерами¶
Can I Use minmaxwh? Data on support for the minmaxwh feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
html> head> meta charset="utf-8" /> title>min-widthtitle> style> .container min-width: 420px; /* Минимальная ширина контейнера */ > .col1 background-color: #fc0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ float: left; /* Обтекание по правому краю */ width: 150px; /* Ширина левой колонки */ > .col2 background-color: #c0c0c0; /* Цвет фона колонки */ padding: 5px; /* Поля вокруг текста */ width: 250px; /* Ширина правой колонки */ float: left; /* Обтекание по правому краю */ > style> head> body> div class="container"> div class="col1">Колонка 1div> div class="col2">Колонка 2div> div> body> html> min-width
Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.
Значение ширины элемента будет вычисляться в зависимости от установленных значений свойств width , max-width и min-width . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.
| Значения свойств | Ширина | ||||
|---|---|---|---|---|---|
| min-width | width | max-width | width | ||
| min-width | > | width | > | max-width | min-width |
| min-width | > | width | max-width | min-width | |
| min-width | width | width | |||
| min-width | > | width | min-width | ||
| min-width | > | max-width | min-width | ||
| min-width | max-width | max-width | |||
Данные из таблицы следует понимать следующим образом. Если значение ширины ( width ) меньше значения min-width , то ширина элемента принимается равной min-width .
Синтаксис
min-width: значение | проценты | inherit
Значения
В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются. inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
min-width
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования min-width в браузере
Объектная модель
[window.]document.getElementById(» elementID «).style.minWidth
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Max-width, max-height, min-width, min-height: максимальные и минимальные размеры элемента
Несколько уроков назад мы рассматривали свойства width и height для установки фиксированной ширины и высоты элемента. Но современный CSS не ограничивается этими свойствами и предлагает нам намного более гибкую настройку стилей.
Свойства min-width/min-height и max-width/max-height позволяют задавать минимальную и максимальную ширину/высоту соответственно. Разберем их по порядку:
- min-width — с помощью этого свойства вы можете указать минимальную ширину элемента. Например, если вы зададите блоку стиль min-width: 50px , то ширина блока может стать больше, но она никогда не станет меньше, чем 50 пикселей. Это очень удобно, например, при создании адаптивной верстки, когда при определенных размерах экрана элемент с относительной шириной становится слишком узким. Свойство min-width позволяет предотвратить такие искажения.
- min-height — работает аналогично предыдущему свойству, но только по отношению к высоте элемента. Безусловно, это тоже очень полезное свойство в практике, которое позволяет задать минимальную высоту элемента.
- max-width — как вы уже догадались, это свойство позволяет задать максимально допустимую ширину элемента. Например, элемент со стилем max-width: 960px может иметь ширину меньше максимальной, но он никогда не станет больше, чем 960 пикселей. Данное свойство удобно использовать при создании адаптивной разметки, когда вам необходимо, чтобы элемент адаптировался под ширину экрана любого устройства, но при этом не слишком широко разъезжался на больших экранах.
- max-height — работает аналогично предыдущему свойству, только по отношению к высоте. Но, как мы уже говорили ранее, лучше не играть с ограничением высоты элемента без крайней надобности.
- auto — это значение можно использовать для отмены действия свойства.
Итак, все эти свойства позволяют легко контролировать допустимые размеры элементов, при этом не фиксируя их намертво, как это делают обычные свойства width и height. Их можно комбинировать, задавая для одного элемента минимальную и максимальную ширину/высоту. Значения можно устанавливать в любых единицах измерения CSS. Словом, все возможности для реализации очень гибкой верстки.
Что с кроссбраузерностью?
Поддержка браузерами свойств max-width, max-height, min-width, min-height практически стопроцентная. Данную запись не понимает только Internet Explorer 6.
Далее в учебнике: «плавающие» элементы и свойство float.