Зачем при верстке используют width,max-width,height,max-height в процентах?
Я понимаю как оно работает, т.е. задается ширина,высота от родительского элемента, но зачем это используют ютуберы, верстальщики? если несложно, то приведите практический пример с объяснением использования конкретно в верстке.
Web-программированиеВерстка+3
Лучший
На самом деле примеров может быть очень много, если я правильно понял вопрос. Но чтобы не ходить вокруг да около, укажу на самый очевидный ответ - проценты нужны чтобы соблюдать размер элемента в контейнере, а это в свою очередь нужно для "резиновости" вашей верстки, но уверен, что вы это понимаете и вам скорее интересны именно частные случаи, поэтому разберу несколько своих любимых кейсов.
Совместное использование width + max-width.
Очень частый кейс, поэтому разберу его первым. Практически в каждом проекте есть текстовые блоки, которые должны тянуться по ширине контейнера, но до определенного значения, в противном случае очень длинную строку будет просто неудобно читать. И вот как это можно реализовать:
.txt {
width: 100%;
max-width: 500px;
}Адаптивная картинка
Еще один очень популярный кейс. Есть необходимость вписать картинку в ширину контейнера и сделать ее адаптивной. На самом деле приведенный ниже код не так прост, дело в том, что он будет отображать реальный размер картинки до того момента, пока контейнер не станет меньше размера картинки. Если просто указать размер картинки width: 100%, то вы добьетесь иного результата, подумайте какого)
.img {
max-width: 100%;
height: auto;
}Анимация высоты
Те, кто пытался анимировать высоту из значения 'auto' в любое действительное значение наверное знают, что такое в верстке не работает и приходится идти на ухищрения с max-height. Подумайте, как работает этот CSS и почему в этом случае анимация будет работать.
.collapser {
max-height: 0;
overflow: hidden;
transition: max-height .3s ease-in-out;
}
.collapser.open {
max-height: 999px;
}Это самые популярные и простые кейсы. Я не рассматривал откровенные хаки типа min-width: 0 для flex-элементов и пр., но уверен, что даже эти примеры смогли вам показать область применения этих свойств, а дальше практика)