Какая разница в max/min — width(height) и просто width(height)?

Какая разница в max/min — width(height) и просто width(height)?

Это руководство для новичков, которые как и я в начале своего пути освоения CSS и ищут самые простые объяснения в примерах.

Статья будет полезна, если ты уже приступил к практике и верстаешь свои первые проекты. Понимаю как важны такие простые разборы, поэтому решила по шагам показать как работает свойства на практике.

Как сказал htmlbook, а я дополню и разъясню. Width и height - устанавливает ширину и высоту блочных или заменяемых элементов. Ширина и высота не включает толщину границ вокруг элемента, значение отступов и полей.

Выражается свойство в %, пикселях (px), дюймах (in), пунктах (pt) и так далее. При использовании процентной записи ширина элемента вычисляется в зависимости от ширины родителя.

.container { width: 30%; } .block { background: #a288a3; color: black; }
Содержимое .block заняло ширину заданную в родительском блоке равную 30%
Содержимое .block заняло ширину заданную в родительском блоке равную 30%

А если родитель явно не указан, то в его качестве выступает окно браузера.

И как раз с помощью приставки max или min, мы можем задать максимальную или минимальную ширину или высоту элемента. А если значение ширины и высоты (width,height) больше или меньше значения max(min)-width(height), то ширина элемента принимается равной максимальному заданному значению.

Чтобы было еще легче понять, запомните эти моменты:

  • Если мы хотим, чтобы какой-то блок и содержимое в нем занимало фиксированную ширину или высоту мы добавляем max(min).
  • Свойство max(min)-width(height) указанное еще и в % делает макет отзывчивым и адаптивным.

Разница между ними в том, что когда ты ставишь width, то у тебя фиксированная ширина, а когда ты ставишь max-width, то блок с таким свойством будет при уменьшении экрана тоже уменьшаться, это сделано для адаптивности. Вот вам пример на двух блоках ( в примере используем px, так будет удобнее увидеть разницу):

<div class="items-width">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, nesciunt. Vero blanditiis dolor alias nesciunt aliquam facilis vitae pariatur odit molestias odio non excepturi, repellat, praesentium et, suscipit nostrum! Nulla repellat vel autem dicta pariatur recusandae eum voluptatibus eveniet officiis ullam, exercitationem nesciunt quidem inventore vero quibusdam molestiae! Ducimus doloremque recusandae, error, totam soluta quas quidem culpa illum itaque repellendus quia animi minus iste harum vel ut corporis facere alias, sint tenetur. Eos, optio dolor ea omnis illo ullam cumque officiis rerum totam inventore dolores tenetur accusantium voluptas enim et doloremque temporibus, voluptates similique laudantium nisi veritatis voluptatum! Unde, maiores.</div> <div class="items-max-width">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis, nesciunt. Vero blanditiis dolor alias nesciunt aliquam facilis vitae pariatur odit molestias odio non excepturi, repellat, praesentium et, suscipit nostrum! Nulla repellat vel autem dicta pariatur recusandae eum voluptatibus eveniet officiis ullam, exercitationem nesciunt quidem inventore vero quibusdam molestiae! Ducimus doloremque recusandae, error, totam soluta quas quidem culpa illum itaque repellendus quia animi minus iste harum vel ut corporis facere alias, sint tenetur. Eos, optio dolor ea omnis illo ullam cumque officiis rerum totam inventore dolores tenetur accusantium voluptas enim et doloremque temporibus, voluptates similique laudantium nisi veritatis voluptatum! Unde, maiores.</div>

Тут важно понимать, что если внутри блока не будет содержимого, мы ничего не увидим, автоматически заданные свойства будут равны 0, поэтому и наполнили блок текстом, а далее стилизуем два этих блока, задаём им ширину и цвет :

.block-width { width: 1500px; margin: auto; background: #a288a3; color: black; } .block-max-width { max-width: 1500px; margin: auto; background: #11ad8e; color: black; }
.block-max-width уменьшается вместе с окном.
.block-max-width уменьшается вместе с окном.

На этом примере мы видим, что если размер ширины страницы будет меньше чем 1500px, блок 2, в котором указана максимальная ширина (max-width) будет уменьшаться, стараясь соответствовать размеру страницы, а блок 1 с обычной шириной остается всё того же размера. Высота работает точно также.

Вот вам еще один пример с картинкой, который показывает как вообще работает свойство width:

<img src="image.jpg" alt="nature">

Картинка без установления свойств ширины, так как ее размер по умолчанию больше и не помещается полностью, она уходит за рамки окна.

Без установления свойств ширины или высоты.
Без установления свойств ширины или высоты.

Устанавливаем ширину:

img { width: 30%; }
Теперь картинка занимает ширину окна, которую мы задали.
Теперь картинка занимает ширину окна, которую мы задали.

Заключение

Таким образом, мы можем задать любую ширину или высоту картинки или блока, которая нам нужна по проекту. А если вы хотите, чтобы на странице был блок, который должен увеличиваться или уменьшаться, но только до определенного размера, используйте max и min. Копируйте код в примерах, экспериментируйте со значениями, и больше практики на старте! Удачи.

44
Начать дискуссию