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

Узнать подробнее

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

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

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

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

Автор: Guy Routledge

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

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

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree