От автора: приветствую вас в нашей серии уроков CSS от А до Я! В этой серии я расскажу вам про CSS значения и свойства, начинающиеся с различных букв алфавита. Иногда обучающего ролика бывает недостаточно, и в этой статье я дам вам пару быстрых советов по псевдоклассу hover.
H значит hover и height
Почти все о псевдоклассе hover я уже рассказал в видеоуроке на букву H. Hover можно использовать также для создания крутой анимации. К примеру, Google “CSS hover effects” и т.д.
Помимо этого, недавно я записал ролик для сайта Code School, в котором рассказал все о библиотеке hover.css.
В CSS есть еще одно свойство на букву H – height, которое я не так хорошо разбирал на этом сайте.
С помощью свойства height можно задать высоту контента в контейнере. Свойство работает со всеми стандартными единицами измерения длины (px, em, rem, %, vw, vh и т.д.).
Если высота контейнера явно не задана, она вычисляется автоматически, чтобы вписать весь контент (значение по умолчанию auto).
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Крайне не рекомендуется явно прописывать высоту элементов, так как это снижает их гибкость. Контейнер не сможет подстроиться, если контента станет больше. Особенно рискованно задавать явную высоту при работе с адаптивным дизайном, когда при уменьшении ширины окна контент перестраивается в вертикальной плоскости.
Я, как правило, задаю явную высоту только у элементов с заранее известными размерами – у изображений. Еще один пример использования свойства height и width – это использование их в качестве каркаса для элементов с абсолютным или фиксированным позиционированием. Ниже показана проблема с фиксированной высотой.
Первый абзац текста выглядит нормально, пока текст достаточно короткий. Если текст сделать длиннее, он начинает выезжать за пределы стилизованного блока. В качестве решения можно использовать свойство overflow, но тогда часть текста будет скрыта.
Этой ситуации можно было полностью избежать, не указывая явной высоты. Если мой код может быть более гибким, а мне и делать ничего не надо, я только за!
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
