Задание max-width и min-width
Сегодня мы изучим два CSS свойства, не скажу, что они будут для Вас новыми, а скорее всего, будут являться частью дополнения к уже изученному материалу. Называются эти css свойства min-width и max-width. Всем Вам известно свойство width, которое отвечает за ширину элемента. Вы, конечно же, догадались для чего предназначены эти два свойства, которые я написал Выше, но все же скажу - они устанавливают минимальную и максимальную ширину элемента. Чтобы на это посмотреть, мы рассмотрим пример с блоками, к которым и будет применяться данное свойство.
<html>
<head>
<title>Ширина элементов</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="block"></div>
<div class="block2"></div>
</body>
</html>
Применяем CSS стили, которые будут отвечать за минимальную и максимальную ширину блоков:
.block {
background: #ccc;
min-width: 400px;
max-width: 700px;
}
.block2 {
background: #000;
min-width: 400px;
max-width: 550px;
}
Теперь при уменьшении размеров окна браузера, вместе с ним будут уменьшаться наши блоки, а происходить это будет до тех пор, пока данная отметка не достигнет указанной минимальной ширины блока, в нашем случае это 400 пикселей, после чего появится полоса прокрутки и меньше блок уже становиться не будет. Аналогично с максимальной шириной. Вот таким образом Вы можете использовать данные свойства, а в каких ситуациях их применять решать Вам, однако, областей применения этих свойств большое множество. На этом это все, что я хотел рассказать, до встречи!
