CSS от А до Я: как использовать значение auto в CSS

CSS от А до Я: как использовать значение auto в CSS

От автора: Приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе со значением auto.

A значит auto

Значение auto крайне удобно для автоматической подстройки контента на веб-странице. У данного значения множество способов применения. Его можно использовать для хранения контента, выходящего за рамки контейнера, как альтернативу clearfix, для сохранения пропорций изображений и даже для центрирования контента на странице. С помощью трех простых советов я научу вас все это делать.

Совет 1

Значение auto очень полезно в тех случаях, когда контент выходит за рамки контейнера. С помощью свойства overflow: auto можно удержать контент внутри контейнера, но когда контент превышает размеры блока, будет появляться полоса прокрутки.

Удалите в CodePen демо выше свойство overflow, и вы увидите, что станет с контентом, не влезающим в блок.

Совет 2

Свойство overflow: auto можно также использовать вместо clearfix’а. Данное свойство создает новый блочный контекст форматирования, в котором есть свои обтекания, что предотвращает контейнер от схлопывания. В некоторых случаях данное свойство работает даже лучше чем overflow: hidden.

Удалите в демо выше свойство overflow, и блок схлопнется.

Совет 3

Значение auto можно использовать для сохранения соотношения сторон изображений. Если вам необходимо изменить размер изображения внутри контейнера, задайте ширину или высоту (по отношению к контейнеру), а второе значение установите в auto. Так вы сохраните пропорции изображения.

Уменьшите размер окна браузера, чтобы увидеть, как изображение сохраняет правильное соотношение сторон в CodePen демо.

Автор: Guy Routledge

Источник: //www.sitepoint.com/

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

Метки:

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

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