css3 の calc()_html/css_WEB-ITnose

1. calc() とは
Cal は英語の Calculate の略で、CSS3 の新しい関数で、要素の長さを指定するために使用されます。たとえば、calc() を使用して、要素のボーダー、マージン、パディング、フォント サイズ、および幅のプロパティに動的な値を設定できます。 calc() の最大の利点は、要素の幅を calc() を通じて計算できることです。
2.calc() は何ができるのですか?
calc() を使用すると、「width:calc(50% + 2em)」のようにパーセンテージ、em、px、rem の単位値を使用して div 要素の幅または高さを計算できます。この方法では、要素 div の幅の値を考慮し、この面倒なタスクをブラウザに計算させます。
3.calc() 構文
calc() 構文は非常に単純で、私たちが子供の頃に加算 (+)、減算 (-)、乗算 (*)、除算 (/) を学んだときと同じです。数式を使用して次のように表現します。

.elm {  width: calc(expression);}

ここで、「式」は式、つまり長さを計算するために使用される式です。
4. calc() の演算ルール
calc() は一般的な数学演算ルールを使用しますが、よりスマートな関数も提供します。
「+」、「-」、「*」、「/」の四則演算を使用します。
パーセント、px、em、rem などの単位を使用できます。
計算にはさまざまな単位を組み合わせることができます。
式に「+」と「-」がある場合は、その前後にスペースが必要です。 "widht: calc( 12%+5em)" このスペースを入れない書き方は間違っています

式中に「*」と「/」がある場合、前後にスペースを入れることはできませんが、推奨されます。スペースを残すこと。

5. ブラウザの互換性 ブラウザの calc() との互換性は、IE9+、FF4.0+、Chrome19+、Safari6+ でよくサポートされています。また、その前にさまざまな文字を追加する必要があります。ブラウザの製造元の識別子ですが、残念ながら、モバイル ブラウザはまだ「Firefox for android 14.0」をサポートしておらず、残りは完全に全滅しています。

実際に使用するときは、ブラウザのプレフィックス

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

も追加する必要があります