<length>
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
* Some parts of this feature may have varying levels of support.
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 |
Совместимость с браузерами
Loading…