diff options
author | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2022-03-19 00:13:08 +0000 |
commit | 9bf6693b2edd5281c1577856895c55653a41dc01 (patch) | |
tree | 0143e1d1d5c95776e42d8d9afdddedb13a0827c1 /files/ru/web/css/calc() | |
parent | 376471eb81e0a3dc263128f834e3c8c22bb9b4d6 (diff) | |
download | translated-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.html | 125 |
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("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.</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("<number>")}}.</dd> - <dt><strong>/</strong></dt> - <dd>Деление. Делитель должен быть {{cssxref("<number>")}}.</dd> -</dl> - -<p>Операнды в expression могут быть различными выражениями {{cssxref("<length>")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.</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"><div class="banner">Это баннер!</div></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"><form> - <div id="formbox"> - <label>Type something:</label> - <input type="text"> - </div> -</form> -</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> |