1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
---
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>
|
