<length>
CSS тип данных <length>
представляет единицу длины. Длина может быть использована в таких свойствах CSS как width
, height
, margin
, padding
, border-width
, font-size
, и text-shadow
.
Примечание:
Хоть значения <percentage>
также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа <length>
, они не являются <length>
значениями.
Синтаксис
Тип данных <length>
состоит из <number>
, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа 0
единица измерения необязательна.
Примечание:
Некоторые свойства допускают использование отрицательных значений <length>
, а некоторые нет.
Единицы измерения
Относительные единицы измерения
Относительные единицы измерения представляют расстояние, определённое какой-либо другой величиной. В зависимости от единицы, это может быть размер определённого символа, высота строки или размер viewport.
Единицы, зависящие от шрифта
Единицы, зависящие от шрифта, определяют значение <length>
, используя размер какого-либо символа или характеристики шрифта, который применяется к элементу или его родителю.
Примечание:
Эти единицы, особенно em
и rem
, часто используются для создания адаптивных разметок, которые сохраняют вертикальную структуру страницы даже если пользователь изменяет размер шрифта.
- cap Экспериментальная возможность
-
Представляет высоту заглавных букв в шрифте, применённом к элементу.
- ch
-
Представляет ширину символа "
0
" (ноль, символ Юникод U+0030) в шрифте, применённом к элементу. - em
-
Представляет подсчитанный размер шрифта элемента. Если используется в свойстве
font-size
, представляет унаследованный размер шрифта. - ex
-
Представляет x-height (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах
1ex ≈ 0.5em
. - ic Экспериментальная возможность
-
Равна используемой в шрифте ширине символа "
水
" (ККЯ, символ "вода", U+6C34). - lh Экспериментальная возможность
-
Равна рассчитанному значению свойства
line-height
, переведённому в абсолютные единицы измерения. - rem
-
Представляет размер шрифта корневого элемента (обычно
<html>
). Когда используется в свойствеfont-size
корневого элемента, представляет значение по умолчанию (в большинстве браузеров16px
, но настройки пользователя могут переопределить это значение). - rlh Экспериментальная возможность
-
Равна рассчитанному значению свойства
line-height
корневого элемента (обычно<html>
), переведённому в абсолютные единицы измерения. Когда используется в свойствеfont-size
корневого элемента, представляет значение по умолчанию.
Единицы, зависящие от размеров экрана
Эти единицы определяют значение <length>
относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках @page
.
- vh
-
Равна 1% высоты блока содержимого.
- vw
-
Равна 1% ширины блока содержимого.
- vi Экспериментальная возможность
-
Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.
- vb Экспериментальная возможность
-
Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.
- vmin
-
Равна
vh
илиvw
в зависимости от того, что из них меньше. - vmax
-
Равна
vh
илиvw
в зависимости от того, что из них больше.
Абсолютные единицы измерения
Абсолютные единицы измерения представляют физические расстояния, когда известны физические свойства устройства вывода. Одна из единиц привязывается к физической единице, а все остальные к ней. Привязка делается по-разному для устройств с низким разрешением, таких как экраны, и высоким, таких как принтеры.
Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения px
представляет физический пиксель; остальные единицы определяются относительно него. Таким образом, 1in
определяется как 96px
, что равно 72pt
. Последствием такого способа определения является то, что длины, описанные в дюймах (in
), сантиметрах (cm
) или миллиметрах (mm) необязательно равны одноимённым физическим единицам.
Для устройств с высоким dpi дюймы (in
),сантиметры (cm
) и миллиметры (mm
) такие же, как и соответствующие физические единицы. Таким образов, единица px
определяется относительно их (1/96 одного дюйма).
Примечание:
Многие пользователи увеличивают стандартный размер шрифта браузера для удобства чтения. Длины, заданные абсолютными единицами могут вызвать проблемы с доступностью, так как они привязаны к физическим величинам и не масштабируются при изменении настроек. Поэтому предпочтительнее использовать относительные единицы (такие как em
или rem
) в свойстве font-size
.
- px
-
Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на принтерах и экранах с высоким разрешением один пиксель CSS равен нескольким пикселям дисплея.
1px
= 1/96 от1in
. - cm
-
Один сантиметр.
1cm
=96px/2.54
. - mm
-
Один миллиметр.
1mm
= 1/10 от1cm
. - Q Экспериментальная возможность
-
Четверть миллиметра.
1Q
= 1/40 от1cm
. - in
-
Один дюйм.
1in
=2.54cm
=96px
. - pc
-
Одна пайка.
1pc
=12pt
= 1/6 от1in
. - pt
-
Одна точка.
1pt
= 1/72 от1in
. - mozmm Не стандартно , удалена в Firefox 59
-
Экспериментальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.
Интерполяция
При анимации значения <length>
интерполируются как реальные числа с плавающей запятой. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется временной функцией анимации.
Спецификации
Specification |
---|
CSS Values and Units Module Level 4 # lengths |
Совместимость с браузерами
BCD tables only load in the browser