calc()使用

calc()とは?
calc()を学ぶ前に、calc()が何なのかを知る必要があります.彼が何者か知っているだけだ.実際の運用で彼をもっとよく使う.
calc()は文字通り彼を関数functionとして理解することができる.実はcalcは英語の単語calculate(計算)の略で、css 3の新しい機能で、要素の長さを指定します.たとえば、calc()を使用して要素のborder、margin、pading、font-size、widthなどのプロパティに動的値を設定できます.ダイナミック値とはなぜですか?私たちが使っている式で得られた値のためです.しかしcalc()の最大の利点は,流体レイアウトに用いられ,calc()計算により元素の幅を得ることができることである.
 
calc()は何ができますか?
calc()は要素を計算することができます.div要素を与え、パーセント、em、px、rem単位値を使用して幅または高さを計算することができます.例えば、「width:calc(50%+2 em)」は、要素DIVの幅値がどれだけあるかを考慮する必要がなく、この煩わしいタスクをブラウザに渡して計算します.
 
calc()構文
calc()構文は非常に簡単で、私たちが子供の頃にプラス(+)、マイナス(-)、乗(*)、除算(/)を学んだように、数学式を使って表します.
 
 

.elm {
  width: calc(expression);
}

 
 
「expression」は、長さを計算する式です.
 
 
calc()の演算規則
calc()は汎用的な数学演算規則を使用しますが、よりスマートな機能も提供します.
 

は「+」、「-」、「*」、「/」の4つの演算を使用します.

は、パーセンテージ、px、em、remなどの単位を使用することができる.

は、様々な単位を混合して計算することができる.

式に「+」と「-」がある場合、その前後にスペースが必要です.例えば、「widht:calc(12%+5 em)」というスペースのない書き方は間違っています.

式に「*」と「/」がある場合は、前後にスペースはありませんが、スペースを残すことをお勧めします.

ブラウザの互換性
ブラウザはcalc()の互換性に対して悪くなくて、IE 9+、FF 4.0+、Chrome 19+、Safari 6+はいずれもサポートされており、その前に各ブラウザメーカーの識別子を付ける必要があります.

 .elm {
	attribute:	-moz-calc(expression);      /*Firefox*/
	attribute:	-webkit-calc(expression);   /*chrome safari*/
	attribute:	calc(expression);           /*standard*/
 }