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

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

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

A значит auto

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

Совет 1

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

.content-box {
  width: 300px;
  height: 300px;
  border: 1px solid #cc3f85;
  overflow: auto;
}

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

Совет 2

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

.container {
  width: 600px;
  border: 4px solid #9be22d;
  overflow: auto;
}

.blue-box {
  float: left;
  width: 200px;
  height: 200px;
  background-color: #66d9ef;
}

.pink-box {
  float: right;
  width: 200px;
  height: 200px;
  background-color: #cc3f85;
}

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

Совет 3

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

.image-holder {
  width: 50%;
  border: 1px solid;
}

img {
  width: 40%;
  height: auto;
}

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

Автор: Guy Routledge

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree