aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/css/length
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:51:05 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:51:05 +0100
commitc058fa0fb22dc40ef0225b21a97578cddd0aaffa (patch)
treedf20f8b4c724b61cb9c34cdb450a7ac77d690bd0 /files/ru/web/css/length
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.gz
translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.tar.bz2
translated-content-c058fa0fb22dc40ef0225b21a97578cddd0aaffa.zip
unslug ru: move
Diffstat (limited to 'files/ru/web/css/length')
-rw-r--r--files/ru/web/css/length/index.html153
1 files changed, 153 insertions, 0 deletions
diff --git a/files/ru/web/css/length/index.html b/files/ru/web/css/length/index.html
new file mode 100644
index 0000000000..4fd88f8cc2
--- /dev/null
+++ b/files/ru/web/css/length/index.html
@@ -0,0 +1,153 @@
+---
+title: <length>
+slug: Web/CSS/размер
+tags:
+ - CSS
+ - CSS Тип Данных
+ - Величина
+ - Разметка
+ - длина
+translation_of: Web/CSS/length
+---
+<div>{{CSSRef}}</div>
+
+<p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <code>&lt;length&gt;</code> представляет единицу длины. Длина может быть использована в таких свойствах CSS как {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, и {{Cssxref("text-shadow")}}.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Хоть значения {{cssxref("&lt;percentage&gt;")}} также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа <code>&lt;length&gt;</code>, они не являются <code>&lt;length&gt; </code>значениями.</p>
+</div>
+
+<h2 id="Синтаксис">Синтаксис</h2>
+
+<p>Тип данных <code>&lt;length&gt;</code> состоит из {{cssxref("&lt;number&gt;")}}, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа <code>0</code> единица измерения необязательна.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Некоторые свойства допускают использование отрицательных значений <code>&lt;length&gt;</code>, а некоторые нет.</p>
+</div>
+
+<h3 id="Единицы_измерения">Единицы измерения</h3>
+
+<h4 id="Относительные_единицы_измерения">Относительные единицы измерения</h4>
+
+<p>Относительные единицы измерения представляют расстояние, определённое какой-либо другой величиной. В зависимости от единицы, это может быть размер определённого символа, <a href="/ru/docs/Web/CSS/line-height">высота строки</a> или размер {{glossary("viewport")}}.</p>
+
+<h5 id="Единицы_зависящие_от_шрифта">Единицы, зависящие от шрифта</h5>
+
+<p>Единицы, зависящие от шрифта, определяют значение <code>&lt;length&gt;</code>, используя размер какого-либо символа или характеристики шрифта, который применяется к элементу или его родителю.</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Эти единицы, особенно <code>em</code> и <code>rem</code>, часто используются для создания адаптивных разметок, которые сохраняют <a href="https://24ways.org/2006/compose-to-a-vertical-rhythm">вертикальную структуру страницы</a> даже если пользователь изменяет размер шрифта.</p>
+</div>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">cap</span></font> {{experimental_inline}}</dt>
+ <dd>Представляет высоту заглавных букв в <a href="/ru/docs/Web/CSS/font">шрифте</a>, применённом к элементу.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ch</span></font></dt>
+ <dd>Представляет ширину символа "<code>0</code>" (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">em</span></font></dt>
+ <dd>Представляет подсчитанный размер шрифта элемента. Если используется в свойстве {{Cssxref("font-size")}}, представляет <em>унаследованный</em> размер шрифта.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ex</span></font></dt>
+ <dd>Представляет <a href="https://en.wikipedia.org/wiki/X-height">x-height</a> (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах <code>1ex ≈ 0.5em</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">ic</span></font> {{experimental_inline}}</dt>
+ <dd>Равна используемой в шрифте ширине символа "<code>水</code>" (ККЯ, символ "вода", U+6C34).</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">lh</span></font> {{experimental_inline}}</dt>
+ <dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}}, переведённому в абсолютные единицы измерения.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rem</span></font></dt>
+ <dd>Представляет размер шрифта корневого элемента (обычно {{HTMLElement("html")}}). Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию (в большинстве браузеров <code>16px</code>, но настройки пользователя могут переопределить это значение).</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rlh</span></font> {{experimental_inline}}</dt>
+ <dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}} корневого эдемента (обычно {{HTMLElement("html")}}), переведённому в абсолютные единицы измерения. Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию.</dd>
+</dl>
+
+<h5 id="Единицы_зависящие_от_размеров_экрана">Единицы, зависящие от размеров экрана</h5>
+
+<p>Эти единицы определяют значение <code>&lt;length&gt;</code> относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках {{cssxref("@page")}}.</p>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vh</span></font></dt>
+ <dd>Равна 1% высоты блока содержимого.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vw</span></font></dt>
+ <dd>Равна 1% ширины блока содержимого.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vi</span></font> {{experimental_inline}}</dt>
+ <dd>Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vb</span></font> {{experimental_inline}}</dt>
+ <dd>Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vmin</span></font></dt>
+ <dd>Равна <code>vh</code> или <code>vw</code> в зависимости от того, что из них меньше.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">vmax</span></font></dt>
+ <dd>Равна <code>vh</code> или <code>vw</code> в зависимости от того, что из них больше.</dd>
+</dl>
+
+<h4 id="Абсолютные_единицы_измерения">Абсолютные единицы измерения</h4>
+
+<p>Абсолютные единицы измерения представляют физические расстояния, когда известны физические свойтсва устройства вывода. Одна из единиц привязывается к физической единице, а все остальные к ней. Привязка делается по-разному для устройств с низким разрешением, таких как экраны, и высоким, таких как принтеры.</p>
+
+<p>Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения <code>px</code> представляет физический пиксель; остальные единицы определяются относительно него. Таким образом, <code>1in</code> определяется как <code>96px</code>, что равно <code>72pt</code>. Последствием такого способа определения является то, что длины, описанные в дюймах (<code>in</code>), сантиметрах (<code>cm</code>) или миллиметрах (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font>) необязательно равны одноимённым физическим единицам.</p>
+
+<p>Для устройств с высоким dpi дюймы (<code>in</code>),сантиметры (<code>cm</code>) и миллиметры (<code>mm</code>) такие же, как и соответствующие физические единицы. Таким образов, единица <code>px</code> определяется относительно их (1/96 одного дюйма).</p>
+
+<div class="note">
+<p><strong>Обратите внимание:</strong> Многие пользователи увеличивают стандартный размер шрифта браузера для удобства чтения. Длины, заданные абсолютными единицами могут вызвать проблемы с доступностью, так как они привязаны к физическим величинам и не масштабируются при изменении настроек. Поэтому предпочтительнее использовать относительные единицы (такие как <code>em</code> или <code>rem</code>) в свойстве <code>font-size</code>.</p>
+</div>
+
+<dl>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">px</span></font></dt>
+ <dd>Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на <em>принтерах</em> и <em>экранах с высоким разрешением</em> один пиксель CSS равен нескольким пикселям дисплея. <code>1px</code> = 1/96  от <code>1in</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">cm</span></font></dt>
+ <dd>Один сантиметр. <code>1cm</code> = <code>96px/2.54</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font></dt>
+ <dd>Один миллиметр. <code>1mm</code> = 1/10 от <code>1cm</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Q</span></font> {{experimental_inline}}</dt>
+ <dd>Четверть миллиметра. <code>1Q</code> = 1/40 от <code>1cm</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">in</span></font></dt>
+ <dd>Один дюйм. <code>1in</code> = <code>2.54cm</code> = <code>96px</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pc</span></font></dt>
+ <dd>Одна <a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%B0%D0%B9%D0%BA%D0%B0_(%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D0%BA%D0%B0)">пайка</a>. <code>1pc</code> = <code>12pt</code> = 1/6 от <code>1in</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pt</span></font></dt>
+ <dd>Одна точка. <code>1pt</code> = 1/72 от<code>1in</code>.</dd>
+ <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mozmm</span></font> {{non-standard_inline}}, удалена в Firefox 59</dt>
+ <dd>Экспериметальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.</dd>
+</dl>
+
+<h2 id="Интерполяция">Интерполяция</h2>
+
+<p>При анимации значения <code>&lt;length&gt;</code> интерполируются как реальные <a href="https://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D0%BB%D0%BE_%D1%81_%D0%BF%D0%BB%D0%B0%D0%B2%D0%B0%D1%8E%D1%89%D0%B5%D0%B9_%D0%B7%D0%B0%D0%BF%D1%8F%D1%82%D0%BE%D0%B9">числа с плавающей запятой</a>. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется <a href="/ru/docs/Web/CSS/single-transition-timing-function">временной функцией</a> анимации.</p>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('CSS4 Values', '#lengths', '&lt;length&gt;')}}</td>
+ <td>{{Spec2('CSS4 Values')}}</td>
+ <td>Добавлены единицы <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>lh</code>, и <code>rlh</code>.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS3 Values', '#lengths', '&lt;length&gt;')}}</td>
+ <td>{{Spec2('CSS3 Values')}}</td>
+ <td>Добавлены единицы <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vh</code>, <code>vmin</code>, <code>vmax</code>, и <code>Q</code>.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS2.1', 'syndata.html#length-units', '&lt;length&gt;')}}</td>
+ <td>{{Spec2('CSS2.1')}}</td>
+ <td>Явно определены единицы <code>em</code>, <code>pt</code>, <code>pc</code>, и <code>px</code>.</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('CSS1', '#length-units', '&lt;length&gt;')}}</td>
+ <td>{{Spec2('CSS1')}}</td>
+ <td>Первое определение. Неявно определены единицы <code>em</code>, <code>pt</code>, <code>pc</code>, и <code>px</code>.</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+
+
+<p>{{Compat("css.types.length")}}</p>