From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../index.html" | 153 +++++++++++++++++++++ 1 file changed, 153 insertions(+) create mode 100644 "files/ru/web/css/\321\200\320\260\320\267\320\274\320\265\321\200/index.html" (limited to 'files/ru/web/css/размер/index.html') diff --git "a/files/ru/web/css/\321\200\320\260\320\267\320\274\320\265\321\200/index.html" "b/files/ru/web/css/\321\200\320\260\320\267\320\274\320\265\321\200/index.html" new file mode 100644 index 0000000000..4fd88f8cc2 --- /dev/null +++ "b/files/ru/web/css/\321\200\320\260\320\267\320\274\320\265\321\200/index.html" @@ -0,0 +1,153 @@ +--- +title: +slug: Web/CSS/размер +tags: + - CSS + - CSS Тип Данных + - Величина + - Разметка + - длина +translation_of: Web/CSS/length +--- +
{{CSSRef}}
+ +

CSS тип данных <length> представляет единицу длины. Длина может быть использована в таких свойствах CSS как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, и {{Cssxref("text-shadow")}}.

+ +
+

Обратите внимание: Хоть значения {{cssxref("<percentage>")}} также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа <length>, они не являются <length> значениями.

+
+ +

Синтаксис

+ +

Тип данных <length> состоит из {{cssxref("<number>")}}, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа 0 единица измерения необязательна.

+ +
+

Обратите внимание: Некоторые свойства допускают использование отрицательных значений <length>, а некоторые нет.

+
+ +

Единицы измерения

+ +

Относительные единицы измерения

+ +

Относительные единицы измерения представляют расстояние, определённое какой-либо другой величиной. В зависимости от единицы, это может быть размер определённого символа, высота строки или размер {{glossary("viewport")}}.

+ +
Единицы, зависящие от шрифта
+ +

Единицы, зависящие от шрифта, определяют значение <length>, используя размер какого-либо символа или характеристики шрифта, который применяется к элементу или его родителю.

+ +
+

Обратите внимание: Эти единицы, особенно em и rem, часто используются для создания адаптивных разметок, которые сохраняют вертикальную структуру страницы даже если пользователь изменяет размер шрифта.

+
+ +
+
cap {{experimental_inline}}
+
Представляет высоту заглавных букв в шрифте, применённом к элементу.
+
ch
+
Представляет ширину символа "0" (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.
+
em
+
Представляет подсчитанный размер шрифта элемента. Если используется в свойстве {{Cssxref("font-size")}}, представляет унаследованный размер шрифта.
+
ex
+
Представляет x-height (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах 1ex ≈ 0.5em.
+
ic {{experimental_inline}}
+
Равна используемой в шрифте ширине символа "水" (ККЯ, символ "вода", U+6C34).
+
lh {{experimental_inline}}
+
Равна рассчитанному значению свойства {{Cssxref("line-height")}}, переведённому в абсолютные единицы измерения.
+
rem
+
Представляет размер шрифта корневого элемента (обычно {{HTMLElement("html")}}). Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию (в большинстве браузеров 16px, но настройки пользователя могут переопределить это значение).
+
rlh {{experimental_inline}}
+
Равна рассчитанному значению свойства {{Cssxref("line-height")}} корневого эдемента (обычно {{HTMLElement("html")}}), переведённому в абсолютные единицы измерения. Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию.
+
+ +
Единицы, зависящие от размеров экрана
+ +

Эти единицы определяют значение <length> относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках {{cssxref("@page")}}.

+ +
+
vh
+
Равна 1% высоты блока содержимого.
+
vw
+
Равна 1% ширины блока содержимого.
+
vi {{experimental_inline}}
+
Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.
+
vb {{experimental_inline}}
+
Равна 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 {{experimental_inline}}
+
Четверть миллиметра. 1Q = 1/40 от 1cm.
+
in
+
Один дюйм. 1in = 2.54cm = 96px.
+
pc
+
Одна пайка. 1pc = 12pt = 1/6 от 1in.
+
pt
+
Одна точка. 1pt = 1/72 от1in.
+
mozmm {{non-standard_inline}}, удалена в Firefox 59
+
Экспериметальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.
+
+ +

Интерполяция

+ +

При анимации значения <length> интерполируются как реальные числа с плавающей запятой. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется временной функцией анимации.

+ +

Спецификации

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#lengths', '<length>')}}{{Spec2('CSS4 Values')}}Добавлены единицы vi, vb, ic, lh, и rlh.
{{SpecName('CSS3 Values', '#lengths', '<length>')}}{{Spec2('CSS3 Values')}}Добавлены единицы ch, rem, vw, vh, vmin, vmax, и Q.
{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}{{Spec2('CSS2.1')}}Явно определены единицы em, pt, pc, и px.
{{SpecName('CSS1', '#length-units', '<length>')}}{{Spec2('CSS1')}}Первое определение. Неявно определены единицы em, pt, pc, и px.
+ +

Поддержка браузерами

+ + + +

{{Compat("css.types.length")}}

-- cgit v1.2.3-54-g00ecf