Как создавать адаптивные кнопки и блоки в CSS05.11.2018 11:19

Основатель компании Useful Web и преподаватель «Нетологии» Владимир Языков рассказал, как создавать кнопки и блоки страниц, содержимое которых может измениться.

Обучение в онлайн-университете: курс «HTML-верстка: с нуля до первого макета»

Если содержимое в блоке может измениться, вместо жестких размеров блока задавайте внутренние отступы. Расскажу, как сделать так, чтобы:

  • правка дополнительного содержимого не затрагивала ранее написанные стили;
  • при добавлении нового содержимого макет отображался корректно.

Кнопки

Создадим кнопку общего назначения:

.button {
/* геометрия элемента */
width: 150 px;
height: 20 px;
/* отступы между кнопками */
margin-bottom: 5 px;
/* центрируем текст кнопки по вертикали */
display: flex;
justify-content: center;
/* центрируем текст кнопки по горизонтали */
text-align: center;
/* чтобы работала геометрия и отступы у тега a */
display: inline-block;
/* убираем обводку у тега a */
text-decoration: none;
background-color: red;
color: #fff;
}

Примеры использования:

a href=»#» class=«button«Отправить резюме/a
a href=»/» class=«button«Очистить форму/a


Код примера

В процессе развития проекта в элементах сайта может измениться содержимое. Это значит, что текст в кнопке «Отправить резюме» может смениться на «Отправьте нам ваше резюме», и получится вот так:


Код примера

Слово «резюме» не поместилось, хотя именно из-за него и появился дополнительный отступ.

Проблема

Жесткие размеры дают корректное отображение макета только здесь и сейчас.

Решение

Можно добавить более гибкую систему геометрии блочной модели, поставив значение min-width:

.button {
min-width: 150 px;
/* при жесткой высоте будет увеличиваться ширина */
height: 20 px;
/* … остальной код без изменения */
}


Код примера

Мы поправили отображение, но теперь текст слишком близко к границам кнопки, поэтому нужно поставить внутренние отступы. Не забудьте вычесть их из ширины блока при box-sizing: content-box, то есть стандартном поведении элементов.

.button {
/*
поскольку другое значение border-box не задавалось,
нужно подкорректировать размеры
*/
min-width: 140 px;
/* при жесткой высоте будет увеличиваться ширина */
height: 20 px;
padding: 0 10 px;
/* … остальной код без изменения */
}


Код примера

Блоки страницы

При верстке посадочных страниц можно встретить блоки с большим количеством свободного пространства внутри. Пример:

Лучше всего оформить это в CSS так:

div class=«greeting»
h1 class=«greeting__title»
Поздравляю, вы стали обладателем квартиры в Сызрани!
/h1
/div

.greeting {
/* задаём геометрию */
height: 200 px;
padding: 20 px;
/* центрируем содержимое по вертикали и горизонтали */
display: flex;
align-items: center;
justify-content: center;
/* учитываем последующее добавление элементов */
flex-direction: column;
background: blue;
}
.greeting__title {
color: #fff;
font-family: Arial;
font-size: 20 px;
}

Вот что у нас получилось:


Код примера

Проблема

Возможно, позже в этот блок понадобится добавить описание. При большом количестве текста с нашими жесткими размерами все пойдет наперекосяк:

Такое происходит при переполнении контейнера .greeting. Некоторые начинающие специалисты могут просто поставить overflow: hidden, но это не решит проблему.

Решение

Ставим min-height и отступы на случай, если содержимого станет слишком много:

.greeting {
/* задаём геометрию */
min-height: 200 px;
padding: 20 px;
/* код без изменения */
}

Код примера

padding min-*

А что, если задать размеры отступов, значительно превышающие в сумме минимальную ширину или высоту?

.greeting {
/* задаём геометрию */
min-height: 40 px;
/* тут речь идет только о box-sizing: content-box */
padding: 80 px;
/* код без изменения */
}

Начальное поведение у элементов в обоих случаях будет одинаковым, а вот поведение при превышении минимального значения контейнера — разным.


Код примера

Внешние отступы

А что там с margin’ами? Можно ли их подвязать на замену padding? Нет. Внешние отступы имеет смысл использовать, чтобы задать расстояния между несколькими логически законченными блоками. Не делайте так:

div class=«greeting»
div class=«greeting__container»
h1 class=«greeting__title»
Поздравляю, вы стали обладателем квартиры в Сызрани!
/h1
/div
/div

И так тоже не делайте:

.greeting {
/* задаём геометрию */
min-height: 40 px;
/* не задаём никакие отступы в родительском элементе */
/* код без изменения */
}

.greeting__container {
margin: 80 px;
}

Резюме

  • Для всего, что может измениться, задавайте минимальные и максимальные размеры.
  • Добавляйте отступы для корректного отображения.

Уточните у дизайнера или клиента, какую часть свободного места можно отвести на отступы, оставив разницу на min-width/height.

Читать еще:»10 ошибок начинающего верстальщика и как их избежать»

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Полный текст статьи читайте на Нетология