diff options
Diffstat (limited to 'files/ru/web/css/calc/index.html')
| -rw-r--r-- | files/ru/web/css/calc/index.html | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/files/ru/web/css/calc/index.html b/files/ru/web/css/calc/index.html new file mode 100644 index 0000000000..36e0040f27 --- /dev/null +++ b/files/ru/web/css/calc/index.html @@ -0,0 +1,126 @@ +--- +title: Функция calc() +slug: Web/CSS/calc +tags: + - css calc +translation_of: Web/CSS/calc() +original_slug: 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> |