calc()

div.hoge{
	width: 200px; /* サポートしていないブラウザの為 */
	width: calc(300px - 100xp);
	width: -webkit-calc(300px - 100xp); /* 古いChromeやsafariに対応させる為 */
}

値	概要
+	加算を行います。
-	減算を行います
*	乗算を行います。引数の1つは『数量』である必要がありますのでご注意下さい。
/	除算を行います。右の引数は『数量』である必要がありますのでご注意下さい。

<div style="width: calc(300px - 100xp); width: -webkit-calc(300px - 100xp); background: #f00;">ここはdiv要素です。widthの数値を『300px - 100px』の演算結果『200px』にしてます。</div>

※ バージョン情報は MDN / Can I Use に基づいています。

※Android4系は4.4からサポートされているので、4.3以下では使用できません。

『calc()』を使用すると演算(計算)を行うことができます。

『calc()』で計算できる値は、『長さ』、『角度』、『時間』、『整数値』、そしてcss2.1から廃止されていますが『周波数』になります。

<div class="nagasa">ここはdiv要素です。widthの数値を『300px - 100px』の演算結果『200px』にしてます。</div>
<div class="kakudo">ここはdiv要素です。角度を『50deg - 40deg』の演算結果『10deg』にしています。</div>
<div class="jikan">ここはdiv要素です。アニメーションの時間を『5s - 3s』の演算結果『2s』にしています。</div>

/* 横幅を『300px - 100px』の演算結果『200px』にしています。 */
div.nagasa{
	width: calc(300px - 100xp);
	width: -webkit-calc(300px - 100xp);
	background: #F00;
}
/* 角度を『50deg - 40deg』の演算結果『10deg』にしています。 */
div.kakudo{
	width: 200px;
	background: #FF0;
	margin:40px 0;
	transform: rotate(calc(50deg - 40deg));
	-moz-transform: rotate(calc(50deg - 40deg));
	-ms-transform: rotate(calc(50deg - 40deg));
	-webkit-transform: rotate(-webkit-calc(50deg - 40deg));
}
/* 時間を『5s - 3s』の演算結果『2s』にしています。 */
div.jikan{
	width:200px;
	background: #0F0;
	-webkit-animation:hoge -webkit-calc(5s - 3s) infinite alternate;
	-moz-animation:hoge calc(5s - 3s) infinite alternate;
	animation:hoge calc(5s - 3s) infinite alternate;
}
@-webkitkeyframes hoge { 0%{margin-left:0px;} 100%{margin-left:50px;}}
@-mozkeyframes hoge { 0%{margin-left:0px;} 100%{margin-left:50px;}}
@keyframes hoge { 0%{margin-left:0px;} 100%{margin-left:50px;}}

『100 ÷ 3』の様に割り切れない数値も演算させることができます。

<div style="width:33.33%; width:calc(100% / 3); width:-webkit-calc(100% / 3); background: #f00;">ここはdiv要素です。widthの値に『100% ÷3 』の演算結果を指定しています。</div>

使用できる単位は『px』や『%』だけじゃなく『em』や『cm』なども使用可能で、異なる単位同士でも演算させることができます。また『calc()』内部でさらに『calc()』を使用することができます。

<div style="width: calc(100% - calc(10px + 10px)); width: -webkit-calc(100% - calc(10px + 10px)); background: #f00;">ここはdiv要素です。widthの値を『calc(100% - calc(10px + 10px))』の演算結果に指定しています。</div>