Единицы измерения в CSS
Проценты
Значения многих свойств можно указывать в процентах. В основном они используются для задания размеров блоков и шрифтов.
Значения в процентах всегда определяются относительно некоторого другого значения. Это может быть:
- значение того же свойства родительского элемента;
- значение другого свойства того же элемента;
- значение какого-либо свойства элемента-предка (например, ширина родительского блока или окна браузера).
Пример:
<p>Вакуум космоса <span style="font-size: 150%">не является абсолютным</span>.</p>
Вакуум космоса не является абсолютным.
В данном примере размер шрифта элемента <span> в полтора раза больше, чем у его родительского элемента. Как бы ни менялся размер шрифта элемента <p>, всегда будет сохраняться полуторное отношение этих шрифтов.
Пример с зависимостью от своих свойств:
<!DOCTYPE html>
<html>
<head>
<title>Единицы измерения в CSS</title>
</head>
<body>
<ul style="line-height: 25px;">
<li style="font-size: 10px; line-height: 150%;">Вакуум космоса не является абсолютным.</li>
<li style="font-size: 15px; line-height: 150%;">Вакуум космоса не является абсолютным.</li>
<li style="font-size: 20px; line-height: 150%;">Вакуум космоса не является абсолютным.</li>
<li style="font-size: 25px; line-height: 150%;">Вакуум космоса не является абсолютным.</li>
</ul>
</body>
</html>
- Вакуум космоса не является абсолютным.
- Вакуум космоса не является абсолютным.
- Вакуум космоса не является абсолютным.
- Вакуум космоса не является абсолютным.
Междустрочный интервал каждой строки имеет значение 150%, но на экране интервал отличается. Это является следствием того, что в процентах интервал задаётся относительно размера шрифта текущего элемента, а не значения line-height родительского элемента.
Единицы длины
Для задания размеров (блоков, шрифтов, полей и отступов) используются единицы длины. Они бывают двух видов: абсолютные и относительные.
Абсолютные единицы длины
Абсолютные единицы измерения размеров фиксированы по отношению друг к другу и зависят только от свойств экрана (физического размера и разрешения), то есть их значения нельзя изменить. Они полезны только тогда, когда конечный размер заведомо известен.
При вёрстке страницы эти единицы почти не используются, так как усложняют создание гибкой вёрстки под различные устройства вывода (компьютер, мобильное устройство и т.д.). Ниже в таблице представлены все абсолютные единицы и их соотношения:
| Ед. измерения | Название | Соотношение |
|---|---|---|
px |
Пиксель | 1px = 1in / 96 |
in |
Дюйм | 1in = 96px |
pc |
Пика | 1pc = 1in / 6 |
pt |
Пункт | 1pt = 1in / 72 |
cm |
Сантиметр | 1cm = 1in / 2.54 |
mm |
Миллиметр | 1mm = 1in / 25.4 |
q |
Четверть миллиметра | 1q = 1in / 101.6 |
px
Пиксель является основной единицей измерения. Все размеры, унаследованные или заданные в любых единицах измерения или ключевыми словами, для вывода на экран пересчитываются браузером в пиксели. Такие значения называются вычисленными
.
Размер пикселя зависит от физических размеров экрана и установленного разрешения. На практике пиксели на экране не могут быть разделены, но в CSS можно использовать дробные значения в пикселях, например:
border-width: 1.5px;
Такое явление вполне нормально. Если необходимые размеры в пикселях получаются дробными, то желательно их так и указывать. В таком случае браузер автоматически округлит значения до целых чисел наиболее оптимальным способом.
in, pc, pt, cm, mm, q
Остальные абсолютные единицы измерения (in, pc, pt, cm, mm, q) жёстко привязаны к пикселю и на практике не используются.
Относительные единицы длины
В основном при вёрстке используются относительные единицы измерения длины. Они не имеют фиксированного значения, а зависят от значений определённых свойств. Таким образом, достаточно изменить свойство одного элемента, а все остальные автоматически пересчитаются под новый параметр. Этот подход является основным при создании гибкой вёрстки страницы.
Ниже в таблице представлены все относительные единицы:
| Ед. измерения | Значение |
|---|---|
em |
Размер шрифта текущего элемента. |
ex |
Высота буквы |
ch |
Ширина символа |
rem |
Размер шрифта корневого элемента (<html>). |
vw |
1/100 доля от ширины окна браузера. |
vh |
1/100 доля от высоты окна браузера. |
vmin |
1/100 доля от меньшей стороны окна браузера. |
vmax |
1/100 доля от большей стороны окна браузера. |
em
1em равен вычисленному значению размера шрифта текущего элемента. Если для данного элемента размер шрифта не задан, тогда используется значение, унаследованное от родительского элемента, или значение браузера по умолчанию.
Пример: имеется параграф с отступом красной строки. Если отступ задан в пикселях, то при любом изменении размера шрифта он будет постоянный:
<p style="font-size: 10px; text-indent: 25px;">Вакуум космоса не является абсолютным.</p> <p style="font-size: 15px; text-indent: 25px;">Вакуум космоса не является абсолютным.</p> <p style="font-size: 20px; text-indent: 25px;">Вакуум космоса не является абсолютным.</p> <p style="font-size: 25px; text-indent: 25px;">Вакуум космоса не является абсолютным.</p>
Вакуум космоса не является абсолютным.
Вакуум космоса не является абсолютным.
Вакуум космоса не является абсолютным.
Вакуум космоса не является абсолютным.
Чтобы отступ соответствовал размеру шрифта, можно воспользоваться единицей em:
<p style="font-size: 10px; text-indent: 1.5em;">Вакуум космоса не является абсолютным.</p> <p style="font-size: 15px; text-indent: 1.5em;">Вакуум космоса не является абсолютным.</p> <p style="font-size: 20px; text-indent: 1.5em;">Вакуум космоса не является абсолютным.</p> <p style="font-size: 25px; text-indent: 1.5em;">Вакуум космоса не является абсолютным.</p>
Вакуум космоса не является абсолютным.
Вакуум космоса не является абсолютным.
Вакуум космоса не является абсолютным.
Вакуум космоса не является абсолютным.
В данном случае отступ автоматически меняется в соответствии с изменением размера шрифта.
Размер шрифта тоже можно задавать в em-ах. В этом случае 1em равен унаследованному от родителя значению font-size. Такой способ используется редко, так как усложняет восприятие кода. Чтобы задать размер шрифта относительно родительского, используется процентная запись:
<p style="font-size: 1.5em; text-indent: 1.5em;">Вакуум космоса не является абсолютным.</p> <p style="font-size: 150%; text-indent: 1.5em;">Вакуум космоса не является абсолютным.</p>
Вакуум космоса не является абсолютным.
Вакуум космоса не является абсолютным.
Эти записи идентичны, но во втором случае легче определить, относительно чего высчитывается размер шрифта.
ex, ch
Единицы ex и ch жёстко привязаны к размеру шрифта. Они на практике не применяются, так как использование единицы em обычно достаточно.
rem
1rem равен вычисленному значению размера шрифта корневого элемента документа (элемент <html> для HTML-страницы).
Единицу rem удобно использовать для масштабирования элементов на странице (актуально для создания гибкой вёрстки). Можно присвоить свойству font-size элемента <html> абсолютное значение, например, 10px. Далее, единицу rem можно использовать как свою собственную в любом месте страницы. Для масштабирования всех необходимых размеров достаточно изменить размер шрифта всего одного элемента страницы. Это можно сделать при помощи JavaScript или применением медиа-запросов.
Чаще всего rem применяется для задания размера шрифта элементов страницы. Если использовать em или проценты для этих целей, тогда необходимо контролировать размер шрифта родительского элемента, который, в свою очередь, может быть задан в относительных единицах. Пример с процентами:
<html>
<head>
<title>Единицы измерения в CSS</title>
<style>
html {
font-size: 30px;
}
div {
font-size: 80%;
}
</style>
</head>
<body>
<div>
Вакуум
<div>
космоса
<div>
не является
<div>
абсолютным.
</div>
</div>
</div>
</div>
</body>
</html>
Для всех <div>-ов размер шрифта задан одинаковый, но отображаются они по-разному. Всё дело во вложенности элементов и, следовательно, различных родительских элементах.
Пример с rem:
<html>
<head>
<title>Единицы измерения в CSS</title>
<style>
html {
font-size: 30px;
}
div {
font-size: 0.8rem;
}
</style>
</head>
<body>
<div>
Вакуум
<div>
космоса
<div>
не является
<div>
абсолютным.
</div>
</div>
</div>
</div>
</body>
</html>
Все <div>-ы отображаются одинаково, так как в любом месте страницы 1rem = 30px.
vw, vh, vmin, vmax
Единицы vw, vh, vmin и vmax напрямую зависят от размеров окна браузера (видимой части страницы). Следовательно, наилучший вариант их использования - это создание гибкой вёрстки. Пример:
<div style="width: 50vw; height: 5vh; background: cyan"></div>
Размер блока автоматически меняется при изменении размеров окна браузера
Углы
Углы в CSS можно задавать с помощью нескольких единиц измерения:
| Ед. измерения | Название | Соотношение |
|---|---|---|
deg |
Градус | 1deg = 1turn / 360 |
grad |
Град (гон) | 1grad = 1turn / 400 |
rad |
Радиан | 1rad = 1turn / 2π |
turn |
Оборот (цикл) | 1turn = 360deg |
Например, угол в 90° можно задать, как 90deg, 100grad, 1.57rad или 0.25turn.
Углы могут использоваться для указания направления (например, в градиентах). Нулевому углу соответствует вектор, направленный вертикально вверх. Поворот этого вектора по часовой стрелке на заданный угол определяет необходимое направление. Углу в 90° соответствует направление слева направо.
Время
Для задания времени в CSS введены две единицы измерения:
| Ед. измерения | Название | Соотношение |
|---|---|---|
s |
Секунда | 1s = 1000ms |
ms |
Миллисекунда | 1ms = 1s / 1000 |