От автора: приветствую вас в нашей серии уроков 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).
Крайне не рекомендуется явно прописывать высоту элементов, так как это снижает их гибкость. Контейнер не сможет подстроиться, если контента станет больше. Особенно рискованно задавать явную высоту при работе с адаптивным дизайном, когда при уменьшении ширины окна контент перестраивается в вертикальной плоскости.
Я, как правило, задаю явную высоту только у элементов с заранее известными размерами – у изображений. Еще один пример использования свойства height и width – это использование их в качестве каркаса для элементов с абсолютным или фиксированным позиционированием. Ниже показана проблема с фиксированной высотой.
Первый абзац текста выглядит нормально, пока текст достаточно короткий. Если текст сделать длиннее, он начинает выезжать за пределы стилизованного блока. В качестве решения можно использовать свойство overflow, но тогда часть текста будет скрыта.
Этой ситуации можно было полностью избежать, не указывая явной высоты. Если мой код может быть более гибким, а мне и делать ничего не надо, я только за!
Автор: Guy Routledge
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
