betacode

Руководство CSS max-width и min-width

  1. CSS max-width
  2. CSS min-width

1. CSS max-width

CSS max-width используется для настройки максимальной ширины элемента. Он препятствует, чтобы ширина превысила указанное значение.
Примечание: CSS width, min-width, max-width работает только с элементами Block и Inline-Block.
Пример с CSS max-width:
Syntax
/* «length» value */
max-width: 3.5em;

/* «percentage» value */
max-width: 75%;

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;
Возможные значения у CSS max-width:
«length»
Назначить определенное значение максимальной ширины, например 150px, 30cm,...
«percentage»
Процентное значение сравнивается с шириной родительского элемента.
none
Ширина элемента не ограничено.
max-content, min-content, fit-content, stretch

2. CSS min-width

CSS min-width используется для настройки минимальной ширины элемента. Он препятствует ширине элемента быть меньше, чем указанное значение.
Примечание: CSS width, min-width, max-width работает только с элементами Block и Inline-Block.
Syntax
/* «length» value */
min-width: 3.5em;

/* «percentage» value */
min-width: 75%;

/* Keyword values */
min-width: auto;
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;
Пример с CSS min-width:
Возможные значения у CSS min-width:
«length»
Указать определенное значение минимальной ширины, например 150px, 30cm,..
«percentage»
Процентное значение по сравнению с шириной родительского элемента.
none
Браузер автоматически расчитает и выберет значение для min-width.
max-content, min-content, fit-content, stretch

Pуководства CSS

Show More

Новейшие статьи

Show More