min-width

min-width

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

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

Табл. 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

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования min-width в браузере

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

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

Браузеры

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

Источник

min-width

Свойство CSS min-width устанавливает минимальную ширину элемента. Это предотвращает используется значение от width собственности становиться меньше , чем значение , заданное для min-width .

Try it

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

Syntax

 / * значение * / min-width: 3.5em; / * значение * / min-width: 10%; / * Значения ключевых слов * / min-width: max-content; min-width: min-content; min-width: fit-content(20em); / * Глобальные значения * / min-width: inherit; min-width: initial; min-width: revert; min-width: revert-layer; min-width: unset;

Values

Определяет min-width как абсолютное значение.

Определяет min-width в процентах от ширины содержащего блока.

Браузер рассчитает и выберет min-width для указанного элемента.

Внутренняя предпочтительная min-width .

Внутренняя минимальная min-width .

Использует формулу fit-content в которой доступное пространство заменяется указанным аргументом, например min(max-content, max(min-content, argument)) .

Formal definition

Initial value	auto
Applies to	все элементы,кроме неперемещенных встроенных элементов,строк таблицы и групп строк.
Inherited	no
Percentages	относиться к ширине содержащего блока
Computed value	процентное соотношение или абсолютная длина
Animation type	длина , процент или calc ();

Formal syntax

min-width = auto | length-percentage [0,∞]> | min-content | max-content | fit-content( length-percentage [0,∞]> ) length-percentage> = length> | percentage> 

Examples

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

table < min-width: 75%; > form < min-width: 0; >

Specifications

Browser compatibility

CSS 2.1 оставляет поведение min-width с table неопределенной. Firefox поддерживает применение min-width к элементам table .

CSS 2.1 оставляет поведение min-width с table неопределенной. Opera поддерживает применение min-width к элементам table .

CSS 2.1 оставляет поведение min-width с table неопределенной. Firefox поддерживает применение min-width к элементам table .

Firefox 18 и более поздние версии (до тех пор, пока значение не было удалено) использовали auto в качестве начального значения для min-width .

Firefox 18 и более поздние версии (до тех пор, пока значение не было удалено) использовали auto в качестве начального значения для min-width .

Источник

min-width

Свойство CSS min-width устанавливает минимальную ширину элемента. Оно предотвращает используемое значение свойства width от становления меньше, чем значение, указанное для min-width .

Интерактивный пример

Ширина элемента принимает значение min-width когда min-width больше чем max-width или width .

Синтаксис

/* значение */ min-width: 3.5em; /* значение */ min-width: 10%; /* Значения-ключевые слова */ min-width: max-content; min-width: min-content; min-width: fit-content; min-width: fill-available; /* Глобальные значения */ min-width: inherit; min-width: initial; min-width: unset; 

Значения

Значения-ключевые слова

Минимальная ширина для 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 | (en-US)
(en-US) | (en-US)
min-content | (en-US)
max-content | (en-US)
fit-content( (en-US) )

=
| (en-US)

Примеры

table  min-width: 75%; > form  min-width: 0; > 

Спецификации

Начальное значение	auto
Применяется к	все элементы, кроме незаменяемых строчных элементов, табличных строк и групп строк
Наследуется	нет
Проценты	ссылается на ширину содержащего блока
Обработка значения	процент, как указан, или абсолютная длина
Animation type	длина, проценты или calc();

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

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on 30 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник