CSS от А до Я: использование псевдокласса hover и свойства height

CSS от А до Я: использование псевдокласса hover и свойства height

От автора: приветствую вас в нашей серии уроков 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).


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Крайне не рекомендуется явно прописывать высоту элементов, так как это снижает их гибкость. Контейнер не сможет подстроиться, если контента станет больше. Особенно рискованно задавать явную высоту при работе с адаптивным дизайном, когда при уменьшении ширины окна контент перестраивается в вертикальной плоскости.

Я, как правило, задаю явную высоту только у элементов с заранее известными размерами – у изображений. Еще один пример использования свойства height и width – это использование их в качестве каркаса для элементов с абсолютным или фиксированным позиционированием. Ниже показана проблема с фиксированной высотой.

Первый абзац текста выглядит нормально, пока текст достаточно короткий. Если текст сделать длиннее, он начинает выезжать за пределы стилизованного блока. В качестве решения можно использовать свойство overflow, но тогда часть текста будет скрыта.

Этой ситуации можно было полностью избежать, не указывая явной высоты. Если мой код может быть более гибким, а мне и делать ничего не надо, я только за!

Автор: Guy Routledge

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree