aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/css/calc()
diff options
context:
space:
mode:
authorMDN <actions@users.noreply.github.com>2022-03-19 00:13:08 +0000
committerMDN <actions@users.noreply.github.com>2022-03-19 00:13:08 +0000
commit9bf6693b2edd5281c1577856895c55653a41dc01 (patch)
tree0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/ru/web/css/calc()
parent376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff)
downloadtranslated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.gz
translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.tar.bz2
translated-content-9bf6693b2edd5281c1577856895c55653a41dc01.zip
[CRON] sync translated content
Diffstat (limited to 'files/ru/web/css/calc()')
-rw-r--r--files/ru/web/css/calc()/index.html125
1 files changed, 0 insertions, 125 deletions
diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html
deleted file mode 100644
index 66fce5a331..0000000000
--- a/files/ru/web/css/calc()/index.html
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: Функция calc()
-slug: Web/CSS/calc()
-tags:
- - css calc
-translation_of: Web/CSS/calc()
----
-<div>{{CSSRef}}</div>
-
-<p><code>calc()</code> - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;number&gt;")}}, или {{cssxref("&lt;integer&gt;")}}.</p>
-
-<p>{{EmbedInteractiveExample("pages/css/function-calc.html")}}</p>
-
-<h2 id="Синтаксис">Синтаксис</h2>
-
-<p>Функция <code>calc()</code> принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / <span id="result_box" lang="ru"><span class="hps">с использованием стандартных</span> <span class="hps">правил</span> <span class="hps">приоритета операторов</span></span>:</p>
-
-<dl>
- <dt><strong>+</strong></dt>
- <dd>Сложение</dd>
- <dt><strong>-</strong></dt>
- <dd>Вычитание.</dd>
- <dt><strong>*</strong></dt>
- <dd>Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("&lt;number&gt;")}}.</dd>
- <dt><strong>/</strong></dt>
- <dd>Деление. Делитель должен быть  {{cssxref("&lt;number&gt;")}}.</dd>
-</dl>
-
-<p>Операнды в expression могут быть различными выражениями {{cssxref("&lt;length&gt;")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.</p>
-
-<div class="note"><strong>Внимание:</strong> Деление на ноль выдаст ошибку при парсинге HTML.</div>
-
-<div class="note"><strong>Note:</strong> Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение <code>calc(50% -8px)</code> будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как <code>calc(50% - 8px)</code> - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.<br>
-Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.</div>
-
-<dl>
-</dl>
-
-<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
-
-<pre class="syntaxbox">calc(<em>expression</em>)</pre>
-
-<h2 id="Примеры">Примеры</h2>
-
-<h3 id="Позиционирование_объекта_в_окне_с_помощью_отступа">Позиционирование объекта в окне с помощью отступа</h3>
-
-<p><code>calc()</code> делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. </p>
-
-<pre class="brush: css">.banner {
- position: absolute;
- left: 5%; /* для браузеров не поддерживающих calc() */
- left: calc(40px);
- width: 90%; /* для браузеров не поддерживающих calc() */
- width: calc(100% - 80px);
- border: solid black 1px;
- box-shadow: 1px 2px;
- background-color: yellow;
- padding: 6px;
- text-align: center;
-}
-</pre>
-
-<pre class="brush: html">&lt;div class="banner"&gt;Это баннер!&lt;/div&gt;</pre>
-
-<p>{{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}</p>
-
-<h3 id="Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера">Автоматическое изменение размера формы ввода для соответствия размеру контейнера</h3>
-
-<p>В следующем случае <code>calc()</code> помогает обеспечить не выпадание полей формы за края блока, задав отступ.</p>
-
-<p>Давайте посмотрим некоторый код CSS:</p>
-
-<pre class="brush: css">input {
- padding: 2px;
- display: block;
- width: 98%; /* для браузеров, не поддерживающих calc() */
- width: calc(100% - 1em);
-}
-
-#formbox {
- width: 130px; /* для браузеров, не поддерживающих calc() */
- width: calc(100% / 6);
- border: 1px solid black;
- padding: 4px;
-}
-</pre>
-
-<p>Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать  размер полей, мы вновь используем функцию <code>calc()</code>, которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:</p>
-
-<pre class="brush: html">&lt;form&gt;
- &lt;div id="formbox"&gt;
- &lt;label&gt;Type something:&lt;/label&gt;
- &lt;input type="text"&gt;
- &lt;/div&gt;
-&lt;/form&gt;
-</pre>
-
-<p>{{ EmbedLiveSample('Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера', '100%', '80') }}</p>
-
-<h3 id="Вложенный_calc_с_CSS_переменными">Вложенный <code>calc()</code> с CSS переменными</h3>
-
-<p>Вы также можете использовать <code>calc()</code> с CSS переменными. Рассмотрим пример кода:</p>
-
-<pre>.foo {
- --widthA: 100px;
- --widthB: calc(var(--widthA) / 2);
- --widthC: calc(var(--widthB) / 2);
- width: var(--widthC);
-}</pre>
-
-
-
-<h2 id="Спецификации">Спецификации</h2>
-
-{{Specifications}}
-
-<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
-
-<p>{{Compat}}</p>
-
-<h2 id="See_also">Смотрите также</h2>
-
-<ul>
- <li><a href="https://hacks.mozilla.org/2010/06/css3-calc/" title="Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog">Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog</a></li>
-</ul>