Какая разница в max/min — width(height) и просто width(height)?
Это руководство для новичков, которые как и я в начале своего пути освоения CSS и ищут самые простые объяснения в примерах.
Статья будет полезна, если ты уже приступил к практике и верстаешь свои первые проекты. Понимаю как важны такие простые разборы, поэтому решила по шагам показать как работает свойства на практике.
Как сказал htmlbook, а я дополню и разъясню. Width и height — устанавливает ширину и высоту блочных или заменяемых элементов. Ширина и высота не включает толщину границ вокруг элемента, значение отступов и полей.
Выражается свойство в %, пикселях (px), дюймах (in), пунктах (pt) и так далее. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родителя.
max-width¶
Свойство max-width устанавливает максимальную ширину элемента.
Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width , max-width и min-width .
Если значение ширины ( width ) больше значения max-width , то ширина элемента принимается равной значению max-width .
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
/* value */ max-width: 3.5em; /* 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; Значения¶
В качестве значений принимаются пиксели (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.
Отменяет действие этого свойства.
max-width: none; Применяется ко всем элементам, кроме строчных и таблиц
Спецификации¶
- 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
html> head> meta charset="utf-8" /> title>Версия сайта для мобильных устройствtitle> style media="only screen and (max-device-width:480px)" > body max-width: 480px; /* Максимальная ширина страницы в пикселях */ > style> head> body> h1>Текст заголовкаh1> p>Текст примераp> body> html> CSS свойство max-width
Свойство max-width устанавливает максимальную ширину элемента.
Это свойство не допускает, чтобы значение свойства width стало больше, чем значение, указанное для max-width .
Max-width отменяет использование свойства width , а min-width отменяет свойство max-width .
| Значение по умолчанию | none |
| Применяется | Ко всем элементам, кроме незаменяемых строчных элементов, таблиц строк и групп строк. |
| Наследуется | Нет |
| Анимируемое | Да. Ширина анимируема. |
| Версия | CSS2 |
| DOM синтаксис | object.style.maxWidth = «500px»; |
Синтаксис
max-width: none | length | initial | inherit;Пример
html> html> head> title>Заголовок документа title> style> div < max-width: 50%; background-color: #1c87c9; > style> head> body> h2>Пример свойства max-width h2> div>Значение свойства max-width этого текста равно 50%. div> body> html>В следующем примере первый элемент указан в «px», а второй указан в «em»:
Пример
html> html> head> title>Заголовок документа title> style> div < max-width: 250px; background-color: #8ebf42; > p < max-width: 20em; background-color: #ccc; color: #fff; > style> head> body> h2>Пример свойства max-width h2> div>Значение свойства max-width этого div элемента равно 250px. div> p>Значение свойства max-width этого параграфа равно 20em. p> body> html>Значения
| Значение | Описание |
|---|---|
| auto | Устанавливает максимальную ширину. Значение по умолчанию. |
| length | Устанавливает максимальную ширину в единицах измерения (px, pt, cm и т. д.). Значение по умолчанию — 0. |
| % | Устанавливает максимальную ширину в процентах. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
| 1.0+ | 12.0+ | 1.0+ | 2.0+ | 4.0+ |
Min и Max Width/Height в CSS
В процессе верстки у меня немалое количество раз возникали проблемы с размерами элементов, поэтому я всегда старался находить лучшие варианты решения каких-либо распространенных проблем.
В данной статье я бы хотел рассмотреть некоторые типовые решения часто возникающих вопросов.
1) Для кнопок (или «кнопкаподобных» дивов) стоит задавать padding и min-width
Это позволит не быть кнопке слишком маленькой в случае короткого текста, а в случае длинного текста он не будет прилипать к краям
2) Для блоков с текстом стоит предпочесть min-height и padding
Таким образом мы избежим переполнения блока, текст не будет выезжать за края. Очень частая ошибка новичков — использовать просто height
3) Для «табов» обязательно нужно указать min-width и max-width
Но в таком случае остается нерешенным один очень важный вопрос: что делать со слишком длинным текстом? Для решения данной проблемы прекрасно подойдут 3 свойства ниже:
Наглядный пример: https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16
4) Минимальная ширина флекс-элемента по умолчанию равняется ширине контента
Этот пункт отчасти относится к посту, который я собирался делать следующим – он будет о том, как правильно работать со слишком длинным и коротким текстом.
Но этот лайфхак как по мне не кажется очевидным, к данной теме он тоже относится, к тому же он выручал меня уже дважды за последние 2 недели (!)
Ситуация состоит в следующем: однажды вы захотите реализовать обрезку текста из пункта 3, но вдруг заметите, что у вас ничего не получается: текст вылезает за края. В основном эта проблема связана с тем, что контейнер вашего текста является флекс-элементом:
Все дело вот в чем: по умолчанию флекс-контейнер не может стать меньше длины своего контента: то есть по умолчанию min-width: ширина контента. Для корректной работы вам нужно указать min-width: 0:
Наглядный пример: https://codepen.io/shadeed/pen/398ccffcd437a2fb042f5ce3bdd68c57
5) Минимальная высота флекс-элемента по умолчанию равняется высоте контента
Пункт, аналогичный пункту 4, только хочу так же привести его с хорошим примером: если указать блоку-контейнеру фиксированную высоту и написать блоку с текстом overflow-y: scroll, height: 100%, то это ни к чему не приведет
Здесь так же нужно воспользоваться min-height: 0:
Наглядный пример: https://codepen.io/shadeed/pen/dea75b84b1fcfd03e5c21173a40afc20?editors=0100
Возможно, некоторые вещи показались вам очевидными, но в недавнем времени у меня была большая каша в голове и благодаря этим примерам я смог лучше разобраться и структурировать алгоритм верстки подобных элементов.
Теперь верстать у меня получается гораздо лучше)
Надеюсь, что эти советы покажутся вам полезными! 🙂