Повесть о свойствах width и max-width

Повесть о свойствах width и max-width

От автора: вы хотели бы ограничить ширину модального окна? Ну, чтобы всплывающее окно походило на модальное на больших экранах. Скажем, вам нужно 600px. Нужно сделать так, чтобы это окно не вылезло за пределы родительского элемента. К примеру, чтобы не появлялась полоса горизонтальной прокрутки на мобильных устройствах.

Как это можно сделать?

width: 600px; max-width: 100%;

width: 100%; max-width: 600px;

Ответ: не важно, результат одинаковый. Некоторые скажут:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

второй вариант более правильный;

на самом деле, разница велика;

второй вариант лучше подходит для родительских блоков небольшой ширины;

первый вариант отстой;

второй вариант более логически описывает поведение окна.

Соглашусь, слегка заумно. Вроде бы подходы разные. Всегда лучше протестировать демо на уменьшение окна.

Об этой проблеме удобно думать в таком плане: если элемент отрисовывается шире, чем предписано в свойстве max-width, то свойство выиграло. Сценарии:

Родительский блок в ширину 1000px

Судя по ширине, элемент должен быть 600px, что не нарушает правила max-width. То есть мы и получим 600px!

Судя по ширине, элемент должен быть 1000px, что нарушает правило max-width. В таком случае уменьшаем ширину окна до 600px.

Родительский блок в ширину 320px

По ширине элемент должен быть 600px. Это нарушает правило max-width, по которому элемент не может быть шире 320px. В итоге получаем наши 320px!

По ширине элемент должен быть 320px. Это не нарушает правило.

Какой бы ширины не был родительский элемент, этот набор правил удовлетворяет всем условиям. Майкл Лоутон говорит, что, есть небольшие отличия в тех случаях, когда окно является флекс элементом.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree