В прошлых уроках вы уже узнали о единицах измерения px. Можно заметить, что стоит указать где-то 20px и это значение будет зафиксировано. Неважно, что вокруг элемента с таким значением, какое разрешение экрана или какое устройство используется. 20 пикселей всегда будут 20 пикселями.
Пиксель является абсолютной единицей измерения. Как уже было сказано выше, такая единица измерения строго фиксирована и не меняется от внешних факторов. Изменить размер можно только переопределением.
В противовес абсолютным единицам измерения существуют относительные единицы измерения. По их названию видно, что они зависят «от чего-то». А вот от чего они зависят, мы рассмотрим в конце урока.
В этом уроке будут рассмотрены все основные единицы измерения. На самом деле их достаточно много, но не все используются постоянно. Если у вас возникнет желание познакомиться со всеми доступными единицами измерения, то в конце урока будет ссылка на официальную спецификацию.
Абсолютные единицы
Абсолютные единицы измерения можно считать самыми простыми. Достаточно получить немного опыта и вы уже на глаз сможете определять, какой размер имеет тот или иной элемент внутри документа.
Самой распространенной единицей является пиксель. С ней вы уже знакомы по другим урокам. Но что же такое пиксель? Если не вдаваться в электронику, то пиксель — это всего лишь минимальный элемент, из которого состоит изображение на экране. Значит, мы указываем, сколько таких элементов должно быть занято на экране устройства.
При этом стоит понимать, что 100 пикселей на одном экране могут быть не равны 100 пикселям на другом экране. Все зависит от размера пикселей в мониторе. А это, в свою очередь, зависит от характеристик экрана и его разрешения.
По этим причинам можно назвать пиксель как относительной, так и абсолютной единицей измерения. Все зависит от того, с какой точки зрения мы смотрим. Для нас важен пиксель в контексте CSS, где он является абсолютной единицей.
div {
height: 100px;
/*
Блочный элемент занимает строго 100 пикселей.
Реальный размер (в сантиметрах) может отличаться на разных устройствах
*/
}
Другие абсолютные единицы почти не используются в разработке для веб-устройств. Стоит их перечислить, но есть вероятность, что вы никогда не будете их использовать.
cm— сантиметрыmm— миллиметрыQ— четверть миллиметраin— дюймpc— пайка/пика. Термин из типографикиpt— пункт
Заметьте, что среди этих единиц есть знакомые в реальной жизни. При верстке для печати это может быть полезно.
Относительные единицы
Самая запутанная часть урока. Относительные единицы берут свое значение от других значений. Самой универсальной такой единицей являются проценты. Они всегда берут свои значения от ближайшего родительского элемента. Остальные единицы можно разделить на две группы:
- Относительные единицы, рассчитывающиеся от размера шрифта.
- Относительные единицы, рассчитывающиеся от размера экрана. Это немного грубое сравнение — на самом деле расчет ведется от размера viewport. О том, что это такое, вы узнаете из курса по адаптивности.
Проценты
Как уже было сказано, проценты рассчитываются от значения того же свойства ближайшего родителя. Однако бывают исключения, например, отступы будут рассчитываться от ширины родителя. Родитель — элемент, внутри которого находится текущий блок. Например:
<html>
<body>
<!-- body — дочерний элемент html. html — родительский элемент для body -->
<main>
<!-- main — дочерний элемент body. body — родительский элемент для main -->
<section>
<!-- section — дочерний элемент main. main — родительский элемент для section -->
<p>
<!-- p — дочерний элемент section. section — родительский элемент для p -->
</p>
<div>
<!-- div — дочерний элемент section. section — родительский элемент для div -->
</div>
</section>
</main>
</body>
</html>
Рассмотрим на примере ширины и размера шрифта.
<section class="w-400px size-50px bg-blue">
<div class="w-50p bg-gray">
<p class="size-70p">Параграф текста</p>
</div>
</section>
.w-400px {
width: 400px;
}
.w-50p {
width: 50%;
}
.size-50px {
font-size: 50px;
}
.size-70p {
font-size: 70%;
}
Что же здесь происходит? Разберемся по шагам:
- Для основного родительского
<section>установлены размеры в абсолютных единицах измерения. Ширина 400 пикселей и размер шрифта 50 пикселей - Вложенный
<div>имеет ширину 50%. Этот размер относительный и высчитывается относительно ближайшего родителя, ширина которого 400 пикселей. Следовательно, ширина блока400px / 2 = 200px - Параграф текста имеет размер шрифта 70%. Ближайший родитель с установленным размером шрифта —
<section>. Параграфу установится размер шрифта в 70% от 50 пикселей. То есть35px
Интересным примером является установка процентов для тега или класса, который предполагает вложение друг в друга. Взгляните на следующий пример:
<ul class="size-30px">
<li>
Элемент 1
<ul>
<li>Элемент 1.1</li>
<li>
Элемент 1.2
<ul>
<li>Элемент 1.2.1</li>
<li>Элемент 1.2.2</li>
</ul>
</li>
</ul>
</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
<li>Элемент 4</li>
</ul>
.size-30px {
font-size: 30px;
}
li {
font-size: 70%;
}
Перед тем, как идти дальше, попробуйте проанализировать эту разметку и посчитать, какие размеры шрифта будут у каждого элемента списка. Не пугайтесь, если вы запутаетесь. Это может быть сложно.
Поразмыслили? Молодцы! Теперь посмотрим, как это выглядит:
Проанализируем результат:
- Размер шрифта самого первого элемента
<ul>— 30 пикселей. - Все элементы
<li>имеют размер шрифта 70%. Это значит, что чем глубже список, тем меньше размер шрифта:- Элементы 1, 2, 3, 4 будут иметь размер 21 пиксель.
- Элементы 1.1 и 1.2 лежат внутри элемент 1. Размер шрифта этого элемента 21 пиксель. Это следует из прошлого пункта. Теперь размер шрифта считается именно от 21 пикселя.
- Элементы 1.1 и 1.2 будут иметь размер 14.7 пикселя.
- Элементы 1.2.1 и 1.2.2 лежат внутри элемент 1.2. Размер шрифта этого элемента 14.7 пикселей. Это следует из прошлого пункта.
- Элементы 1.2.1 и 1.2.2 будут иметь размер шрифта 10.29 пикселя.
Относительные единицы, рассчитывающиеся от размера шрифта
Выдохните — самое сложное уже позади. Если вы внимательно изучили работу процентов, то другие относительные единицы не вызовут сложностей. Есть две основные относительные единицы измерения, которые зависят от размера шрифта: em и rem.
Значение em очень похоже на использование процентов. Оно показывает во сколько раз размер будет больше, чем у ближайшего вычисленного значения font-size. Если в прошлом примере со списками заменить 70% на 0.7em, то результат будет тот же самый. То есть в случае со шрифтом em = размер шрифта родителя × значение em.
Тогда в чем смысл em? Эту единицу измерения можно использовать не только для шрифта, но и для любых других свойств, которые принимают числовое значение. Например, в следующем коде размер нижнего внешнего отступа будет 60px:
section {
font-size: 30px;
}
section p {
margin-bottom: 2em;
}
Но если у параграфа выставить свое значение font-size, то единица em будет высчитываться именно от него. В этом и кроется смысл формулировки «чем у ближайшего вычисленного значения font-size». Модифицируем пример выше и добавим в параграф свое значение font-size равное 10px. Теперь размер нижнего внешнего отступа будет составлять 20px:
section {
font-size: 30px;
}
section p {
font-size: 10px;
margin-bottom: 2em;
}
Второй относительной единицей измерения, которая зависит от размера шрифта, является rem. Ее способ работы точно такой же, как у em. Но есть одно громадное отличие: rem отсчитывается от размера шрифта корневого элемента. Корневым элементом является <html>. Именно размер шрифта у этого элемента и учитывается при расчете единицы rem. То есть в случае со шрифтами rem = размер шрифта корневого элемента × значение rem.
Вернемся к примеру со списком. Заменив em на rem получим совершенно другой результат. 0.7rem высчитываются из одного и того же места, без учета вложенности. Итого, каждый элемент будет иметь размер шрифта 11.2px. Это связано со стандартным значением размера шрифта в 16 пикселей у большинства браузеров.
Вы можете заметить, что размер шрифта в 30 пикселей у элемента <ul> не играет в данном случае никакой роли.
Относительные единицы, рассчитывающиеся от размера экрана
CSS позволяет задавать размеры относительно текущего размера viewport — размера окна браузера, доступного без прокрутки. Основными двумя единицами являются vw (viewport width) — ширина viewport и vh (viewport height) — высота viewport. Вы можете рассматривать это как процент от размера viewport.
Частый «кейс» с использованием таких единиц — создание секции на всю доступную область браузера.
<section class="one-screen-section"></section>
body {
margin: 0;
padding: 0;
}
.one-screen-section {
width: 100vw;
height: 100vh;
background: #80deea;
}
Попробуйте изменять размер окна браузера с примером из CodePen. Какую бы ширину браузера вы не ставили, размер секции будет автоматически меняться. Следовательно, горизонтальная или вертикальная прокрутка никогда не появится.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
