width и height задают ширину и высоту элемента, по умолчанию оба равны auto (блочный элемент растягивается на всю ширину родителя, высота подстраивается под контент). max-width ограничивает верхнюю границу ширины - элемент не может стать шире указанного значения, даже если width явно задан бОльшим.
В этом уроке
Попробуй прямо сейчас: увеличь max-width до 600px - блок вырастет до полных 500px, потому что max-width больше не мешает.
Как задать width и height: единицы измерения и auto по умолчанию
width и height принимают px, %, и другие единицы (о em/rem уже был отдельный урок про шрифты, они тоже подходят). Если не задать width вовсе, блочный элемент по умолчанию растягивается на всю доступную ширину родителя (значение auto) - а height по умолчанию тоже auto, но означает "подстроиться под высоту содержимого".
width: 300px; - фиксированная ширина ровно 300px, независимо от родителя.
Ожидание, что блочный div без width сам "сожмётся" по содержимому - по умолчанию он растягивается на всю ширину родителя, а не подстраивается под текст, как строчный элемент.
Почему height в процентах часто "не работает"
Процентная ширина всегда считается от ширины родителя и работает предсказуемо. А вот процентная высота - только если у родителя ЯВНО задана своя высота (числом, а не auto). Если у родителя height: auto (то есть высота сама зависит от содержимого), процентная высота ребёнка просто игнорируется и ведёт себя как auto - подстраивается под контент, а не под какой-либо процент.
Родителю задан height: 400px, ребёнку height: 50% - у ребёнка получится ровно 200px.
У родителя height: auto, ребёнку задан height: 50% - процент просто не сработает, высота ребёнка определится по его собственному содержимому.
Что делает max-width и как он побеждает width
max-width ограничивает элемент сверху: он не может стать шире указанного значения, даже если width явно задан бОльшим - в этом случае реально используется именно max-width. У min-width обратная роль - не даёт элементу стать УЖЕ указанного значения. Если min-width и max-width конфликтуют между собой, побеждает именно min-width - это заложено в самом порядке применения правил.
width: 100%; max-width: 800px; - классический приём для адаптивности: элемент растягивается, но никогда не превышает 800px.
width: 500px; max-width: 300px;, ожидая увидеть именно 500px - реально отрендерится 300px, max-width побеждает.
Частые ошибки новичков
| Ошибка | Что происходит | Как исправить |
|---|---|---|
| Задают height в процентах, рассчитывая, что сработает всегда | Работает только если у родителя явно задана высота - иначе процент игнорируется | Задать родителю явную высоту, либо использовать единицы вроде vh (отдельная тема) |
| Задают width больше max-width, ожидая, что победит width | Реально используется max-width, а не width | Закладывать в расчёты именно max-width как верхнюю границу |
| Забывают, что при конфликте min-width всегда побеждает max-width | Элемент может оказаться шире, чем задумывалось через max-width | Проверять, что min-width не превышает max-width |
| Путают min/max-width с обычным width, ожидая фиксированного размера | min/max только ограничивают диапазон, а не задают конкретное значение | Для точного фиксированного размера использовать именно width/height |
Шпаргалка
| Что нужно | Как сделать |
|---|---|
| Точный размер | width: 300px; height: 150px; |
| По умолчанию (блочный элемент) | width: auto; (вся ширина родителя) |
| Ограничить максимум | max-width: 600px; |
| Ограничить минимум | min-width: 200px; |
| Высота в процентах | работает только если у родителя задана явная высота |
| При конфликте побеждает | min-width, затем max-width, затем width |
Коротко: отвечаем на вопросы
Почему height: 100% не работает?
Процентная высота работает, только если у родителя явно задана своя высота. Если родитель, а тем более его собственный родитель, использует height: auto (по умолчанию), процент просто не от чего считать - высота ведёт себя так, будто её вообще не задавали. Нужно явно задать высоту всей цепочке родителей до нужного уровня, либо использовать другой подход, например единицы vh.
Зачем ставить max-width: 100% у картинок для адаптивности?
Это не даёт картинке "вылезти" за пределы своего контейнера на узких экранах - изображение уменьшается вместе с контейнером, но никогда не становится шире него, оставаясь при этом в своём естественном размере, если места достаточно.
