Каждое CSS-правило состоит из одной или нескольких пар «свойство-значение». В зависимости от свойства значение может быть, например, числом, или ключевым словом, или несколькими числами с единицами измерения (например, 45deg или 100px). Рассмотрим основные единицы измерения.
Единицы измерения длины или расстояния
СкопированоОтносительные величины
СкопированоИспользуются для задания размера или расстояния относительно чего-либо. Например, vh считается относительно высоты вьюпорта (области просмотра страницы в окне браузера).
emзадаёт величину относительно вычисленного размера шрифта элемента. Если для элементаfont, то- size : 20px 2emбудут эквивалентны40px. При задании размера шрифта вemон считается относительно размера шрифта родительского блока.remрассчитывается относительно размера шрифта корневого элемента. Для веб-страницы это<html>. По умолчанию размер шрифта для<html>равен16px. При таких условиях2remэквивалентны32px.vhзадаёт размер в процентах от высоты вьюпорта.1vhсоставляет 1% от высоты.vwзадаёт размер в процентах от ширины вьюпорта.1vwсоставляет 1% от ширины.vminсчитается относительно меньшей стороны вьюпорта. Если ширина вьюпорта больше высоты, тоvminбудет считаться относительно высоты. И наоборот.1vminсоставляет 1% от меньшей стороны вьюпорта.vmaxсчитается относительно большей стороны вьюпорта.1vmaxсоставляет 1% от большей стороны.exзадаёт величину относительно метрики шрифтаx. Так называется расстояние между базовой линией шрифта и средней линией строчных букв. Обычно это высота буквы- height xв шрифте, отсюда и названиеx. Эту экзотическую величину можно использовать, например, при стилизации верхних или нижних индексов. В примере ниже свойство- height bottomсо значением1exподнимет верхний индекс на высоту строчных букв, а со значением-1exопустит нижний индекс вниз:
sup { position: relative; bottom: 1ex;}sub { position: relative; bottom: -1ex;}
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}
capсчитается относительно высоты заглавных букв шрифта.chзадаёт величину относительно ширины символа0(ноль) в шрифте. В моноширинных (с фиксированной шириной символа) шрифтах (Courier, Menlo, Monaco и других) указание размера10chбудет в точности соответствовать ширине 10 символов. В других шрифтах будет наблюдаться расхождение, ведь, например, ширина цифры 1 меньше, а ширина буквы Ш — больше ширины символа0.ic— это эквивалентchв восточных языках (китайском, корейском, японском). Задаёт размер относительно размера иероглифа 水 (вода).lhзадаёт размер относительно межстрочного интервала. Если прописано свойствоline, то- height : 16px 2lhэквивалентно32px.rlhто же, что иlh, но относительноlineэлемента- height <html>.
Абсолютные величины
СкопированоАбсолютные величины ни от чего не зависят и привязаны к физическим единицам измерения: дюймам или сантиметрам. Этот факт имеет исторические предпосылки. Когда появились первые программы предпечатной подготовки, возникла необходимость понимать, как картинка на экране будет соответствовать напечатанному варианту. Экраны мониторов в то время были примерно одинаковые, и оказалось, что одному дюйму на экране соответствуют 72 экранных точки. Именно это соотношение зафиксировано в единице измерения pt. С развитием технологий улучшались экраны и их разрешение, в один дюйм стало умещаться 96 точек, и это было зафиксировано в px.
pxсоответствуют пикселям на экране.1pxинтерпретируется как 1/96 дюйма.cm— сантиметры.1cm=96px./ 2 . 54 in— дюймы.1in=96px=2.. 54cm mm— миллиметры.1mm=1./ 10cm Q— четверть миллиметра.1=Q 1./ 40cm pc— пики.1pc=1./ 16in pt— пункты.1pt=1./ 72in
Абсолютные величины, отличные от пикселей, удобно использовать для вывода на печать.
На сегодняшний день существуют экраны с разной плотностью пикселей и разным разрешением, поэтому соотношение единиц измерения к точкам экрана утратило прежний смысл. Сантиметры и дюймы при выводе на экран не будут соответствовать своим реальным размерам.
Единицы измерения углов
СкопированоИспользуются, как правило, для задания угла поворота элемента, направления линейного градиента или угла поворота конического градиента.
deg— градусы угла. Полная окружность содержит 360 градусов. В тригонометрии 0° соответствует пересечению окружности с осью x, и градусы отсчитываются против часовой стрелки. В CSS0degсоответствует пересечению окружности с осью y, а градусы отсчитываются по часовой стрелке:
grad— градианы. 1/100 от прямого угла (0.9°). Полная окружность содержит 400 градиан. Эта единица измерения чуть удобнее градусов в плане практических расчётов.rad— радианы. Полная окружность содержит 2π (~6.2832) радиан.turn— оборот. Полная окружность соответствует одному обороту (1turn). Поворот элемента на 90 градусов соответствует0.. 25turn
Единицы измерения времени
СкопированоИспользуются для задания длительности анимации или перехода в свойствах animation и transition.
ms— миллисекунда.s— секунда.1s=1000ms.
Единицы, связанные с разрешением экрана
СкопированоИспользуются для указания плотности пикселей (разрешения экрана) в медиавыражениях.
dpi— указывает плотность пикселей в точках на дюйм (dots per inch). Обычные экраны имеют плотность пикселей 72 или 96dpi, но при печати это разрешение гораздо выше (300 и более точек на дюйм).1dpi=0. В примере ниже изменим размер шрифта при печати на устройствах с плотностью пикселей больше 300:. 39dpcm
@media print and (min-resolution: 300dpi) { .element { font-size: 8pt; }}
@media print and (min-resolution: 300dpi) {
.element {
font-size: 8pt;
}
}
dpcm— плотность пикселей в точках на сантиметр.1dpcm=2.. 54dpi dppx,x— описывает плотность в точках наpx. Поскольку соотношениеinиpxравно 1/96,1dppx=96dpi.
Проценты
СкопированоИспользуются, чтобы указать, что значение представляет собой долю от другой величины. Исходное значение, от которого берётся часть, может относиться как к самому элементу, так и к его предку. Всё зависит от того, для какого свойства мы применяем проценты.
Например, при указании width ширина элемента будет высчитана как 50% (половина) от ширины родителя. Но если мы укажем в процентах положение фона background, это значение будет высчитано относительно ширины самого элемента.
На собеседовании
Скопировано отвечает
СкопированоЧто такое em
СкопированоЕдиницы em в CSS — это относительная единица измерения, которую используют для определения размера элементов, в основном для размера шрифта. Поскольку так задаются размеры относительно родительского элемента, 1em равен размеру шрифта, установленному в родительском элементе.
Это означает, что если установите размер шрифта в родительском <div> как 20px и размер шрифта дочернего <div> как 2em, размер шрифта в дочернем <div> будет равен 40px.
Что такое rem
Скопированоrem — это ещё одна относительная единица для величины шрифта в CSS. Так как em равен размеру пункта текущего шрифта, то rem относится к размеру шрифта корневого элемента. Обычно это тег <html>.
Польза для доступности
СкопированоЕдиницы em и rem — масштабируемый и гибкий способ изменения размеров шрифта на странице, в отличие от px. Если измените размер шрифта корневого элемента, все элементы, размер которых измеряется с помощью em или rem, будут автоматически обновлены, чтобы сохранить их относительные значения.
Для того, чтобы шрифты на странице были доступными, рекомендуют использовать относительные единицы вместо абсолютных. Это особенно важно для пользователей, которые изменяют размер шрифта, разрядку букв и размеры других элементов для более удобного чтения и взаимодействия. Так изменение настроек шрифта в браузере пользователя не приведёт к проблемам со стилями, читаемостью или непредсказуемым результатам.
отвечает
СкопированоПиксель px – это абсолютная единица измерения. 1px интерпретируется как 1/96 дюйма. Главное достоинство использования пикселей для определения размера – чёткость и понятность. Однако, пиксель является фиксированной величиной и не позволяет устанавливать соотношение между различными размерами.
В отличие от px, единицы em и rem – относительные величины.
При задании размера шрифта в em он считается относительно размера шрифта родительского блока.
1em равен размеру шрифта, установленному в родительском элементе.
Размер шрифта в rem рассчитывается относительно размера шрифта корневого элемента. Для веб-страницы это <html>.
Читайте также
-
transitionМеняем состояние элемента плавно, а не резко.