Какая разница в 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
Начать дискуссию
Стартап Mark Engineering представил книжную ИИ-закладку за $129 — но пользователи не поняли, как она работает и какую проблему решает

Заодно пошутили, что устройству уготовано место рядом с «умной» брошью от Humane.

88
66
22
11
реклама
разместить
Xiaomi открыла продажи спортивного электромобиля SU7 Ultra

Пока в Китае, по цене от 529,9 тысячи юаней (около 6,2 млн рублей).

Источник здесь и далее: Xiaomi, Carnewschina
1010
66
11
11
Особенности и сложности крупногабаритной доставки: что нужно знать?

Изучив множества понятий, мы разработали для себя унифицированное. Так что же такое крупногабаритные заказы в e-commerce: крупногабаритный заказ или КГТ (крупногабаритный товар)– это заказ, вес которого от 25 кг до 500 кг, одна из сторон не более 4 метров, сумма всех длин сторон не более 5 метров. Ассортимент таких заказов может быть совершенно раз…

«Абсолютно неинтересно, какие там придумывают санкции»: Герман Греф — о дивидендах «Сбера», санкциях и благодарности Apple за уход из России

Выжимка заявлений главы банка со звонка с аналитиками и инвесторами.

Источник: ТАСС
3636
1818
55
Отсутствие на рынке РФ качественных банковских сервисов - конечно же благо для Грефа, кто бы спорил
Анализ договора за 10 секунд с помощью AI

________________
Время настройки бота: 1 минута
Время анализа договора: 10 секунд
________________
▪ — Прописываем инструкцию (промт)
▪ — Тестируем
▪ — Используем

Анализ договора за 10 секунд с помощью AI
1919
1111
33
22
11
OpenAI выпустили технический отчет новой GPT-4.5: чем она лучше предшественников?
В VK никто не покупает? Клиент Vitamin.tools объясняет, что вы делаете не так

«VK пользуются все: и подростки, и пенсионеры. И среди них много платёжеспособных людей. Им можно продать почти любой продукт, если работать вдолгую: заинтересовывать, прогревать, отвечать на вопросы, напоминать о себе». — Рассказывает клиент рекламной экосистемы Vitamin.tools, возвращающей до 18% от пополнения рекламы, маркетолог Кирилл Чарушин.

В VK никто не покупает? Клиент Vitamin.tools объясняет, что вы делаете не так
3737
1010
55
22
ВК дно, это такой же хладеющий труп как и однокласники.
[]