25 урок

25 Урок 20 - Единицы измерения в css

Рассмотрим сегодня с вами в уроке единицы измерения в css - em, %, px, vw, vh

Устаревшие значения

Существуют также «производные» от пикселя единицы измерения: mm, cm, pt и pc, но они давно отправились на свалку истории. Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

Пиксель (px)

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения. Пиксели в css и html соответствуют пикселям, которые используются в настройках разрешения экранов мониторов.

Относительно шрифта: em

1em – текущий размер шрифта.
Если размер шрифта блока равен 16px, то 3em будет равняться 3*16 = 48px
Наиболее часто применяется к line-height.

Проценты %

Проценты %, как и em – относительные единицы.

Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height:auto. Кроме случая, когда у элемента стоит position:absolute.

Если у родительского элемента не установлено height, а указано min-height, то, чтобы дочерний блок занял 100% высоты, нужно родителю поставить свойство height: 1px;

Относительно экрана: vw, vh

vw – 1% ширины окна, то есть 100vw - это 100% от ширины экрана
vh – 1% высоты окна, то есть 100vh- это 100% от высоты экрана

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

Задание

1. Создайте документ, в котором будет абзацы текста, все заголовки h1-h6 (лучше всегда создавать отдельные папки под задания, если они не пересекаются друг с другом)
2. Задайте всем разный размер шрифта. И задайте высоту строки зависимой от размера шрифта. Чтобы при уменьшении размера шрифта, высота строки тоже изменялась.
3. Создайте фиксированно позиционированное окно, у которого ширина будет равняться половине ширине окна, и должен находиться посередине экрана.
4. Пришлите ссылку на выполненное задание
5. Если я задаю position:absolute одному блоку, то что нужно задать родительскому блоку?
6. Em и % - это относительные единицы, чем они отличаются?

24 урок

В оглавление

26 урок