Минимальная/максимальная высота и ширина в CSS
Четыре свойства ограничивают размер элемента. Ширину ограничивают min-width (наименьшая) и max-width (наибольшая), а высоту таким же образом — min-height (наименьшая) и max-height (наибольшая).
Использование max-width в CSS
С помощью max-width вы ограничиваете, насколько широким может стать элемент: он не вырастет больше заданного вами значения.
Допустимые значения:
- длина — ограничение в
px,cmи так далее. - процент — ограничение относительно содержащего блока.
none— ограничения нет совсем, это значение по умолчанию.
Обычный width создаёт проблемы в окне браузера, которое меньше элемента, потому что появляется горизонтальная полоса прокрутки. max-width лучше справляется с маленькими окнами.
Примеры max-width в CSS
Два div ведут себя по-разному, когда окно браузера становится уже 500px, поэтому попробуйте его уменьшить.
Примечание: если у элемента есть и width, и max-width, и width больше, применяется max-width.
max-width против width
В узком окне div с max-width сжимается, чтобы поместиться. Div с фиксированным width остаётся прежним.
<style> создайте класс .div1 с max-width 500px и фоном powderblue, а также класс .div2 с width 500px и фоном powderblue. Добавьте по одному div каждого класса с текстом. В узком окне div с max-width сжимается, а div с фиксированной шириной сохраняет свой размер.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.div1 {
max-width: 500px;
background-color: powderblue;
}
.div2 {
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="div1">This element has a max-width of 500 pixels.</div>
<br>
<div class="div2">This element has a width of 500 pixels.</div>
</body>
</html>
width и max-width вместе
При ширине 100% div заполняет контейнер, но не больше предела в 900px.
<style> задайте классу .div1 width 100% и max-width 900px, с фоном powderblue. Элемент растёт, заполняя контейнер, но никогда не становится шире 900px. Добавьте div с текстом.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.div1 {
width: 100%;
max-width: 900px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="div1">This element has a width of 100% but never grows wider than 900px.</div>
</body>
</html>
Все CSS-свойства размеров
Свойства размеров вкратце:
height— какова высота элемента.max-height— наибольшая допустимая высота.max-width— наибольшая допустимая ширина.min-height— наименьшая допустимая высота.min-width— наименьшая допустимая ширина.width— какова ширина элемента.