От автора: Приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по работе со значением auto.
A значит auto
Значение auto крайне удобно для автоматической подстройки контента на веб-странице. У данного значения множество способов применения. Его можно использовать для хранения контента, выходящего за рамки контейнера, как альтернативу clearfix, для сохранения пропорций изображений и даже для центрирования контента на странице. С помощью трех простых советов я научу вас все это делать.
Совет 1
Значение auto очень полезно в тех случаях, когда контент выходит за рамки контейнера. С помощью свойства overflow: auto можно удержать контент внутри контейнера, но когда контент превышает размеры блока, будет появляться полоса прокрутки.
1 2 3 4 5 6 |
.content-box { width: 300px; height: 300px; border: 1px solid #cc3f85; overflow: auto; } |
Удалите в CodePen демо выше свойство overflow, и вы увидите, что станет с контентом, не влезающим в блок.
Совет 2
Свойство overflow: auto можно также использовать вместо clearfix’а. Данное свойство создает новый блочный контекст форматирования, в котором есть свои обтекания, что предотвращает контейнер от схлопывания. В некоторых случаях данное свойство работает даже лучше чем overflow: hidden.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.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. Так вы сохраните пропорции изображения.
1 2 3 4 5 6 7 8 9 |
.image-holder { width: 50%; border: 1px solid; } img { width: 40%; height: auto; } |
Уменьшите размер окна браузера, чтобы увидеть, как изображение сохраняет правильное соотношение сторон в CodePen демо.
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.