CSS3のcalc()とは何ですか? calc()の使い方は？

多くの人は calc() が何であるかを知りません。そこで、今日は calc() について学びましょう。学習する前に、calc() が何であるかを知る必要があります。彼が何者であるかを知っている場合にのみ？実際のアプリケーションでのみ、それをより良く使用できます。次のステップは calc() です。

calc() それは何ですか？

calc() 文字通り、関数関数として理解できます。実際、calc は英語の Calculate の略語で、CSS3 の新しい機能であり、要素の長さを指定するために使用されます。たとえば、calc() を使用して、要素のボーダー、マージン、パディング、フォント サイズ、および幅のプロパティに動的な値を設定できます。なぜ動的値と呼ばれるのですか? 値を取得するために式を使用するからです。ただし、calc() の最大の利点は、要素の幅を calc() を通じて計算できることです。

calc() は何ができるでしょうか?

calc() を使用すると、「width:calc(50% + 2em )」のようにパーセンテージ、em、px、rem の単位値を使用して div 要素の幅または高さを計算できます。要素 DIV の幅の値を考慮し、この面倒なタスクをブラウザに計算させます。

calc() 構文

calc() 構文は非常に単純で、私たちが子供の頃に加算 (+)、減算 (-)、乗算 (*)、除算 (/) を学んだときと同じように、表現する数式:

.elm {
  width: calc(expression);
}

ここで、「expression」は式、つまり長さを計算するために使用される式です。

calc() 演算ルール

calc() は一般的な数学演算ルールを使用しますが、よりスマートな関数も提供します:

1. 「+」、「-」、「*」、および「/」演算の 4 つのルールを使用します。 ;
2. パーセント、px、em、rem などの単位を使用できます。
4. 式に「+」と「-」を付ける必要があります。 "widht: calc(12%+5em)" のように、その後にスペースを入れるのは間違っています。
5. 式に「*」と「/」が含まれる場合、前後にスペースを入れることはできません。ただし、スペースのままにすることをお勧めします。

ブラウザの互換性

ブラウザの calc() との互換性は、IE9 以降、FF4.0 以降、Chrome 19 以降、および Safari6 以降でよくサポートされています。また、各ブラウザの前に識別子を追加する必要があります。ブラウザメーカーのブラウザですが、残念ながら、モバイルブラウザはまだ「Firefox for Android 14.0」をサポートしておらず、他のブラウザは全滅しました。

実際の使用では、ブラウザのプレフィックス

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

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

を追加する必要もあります。 calc 関数では、演算子の両側にスペースを確保する必要があることに注意してください。そうしないと、関数がエラーを報告します。

以上がCSS3のcalc()とは何ですか? calc()の使い方は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。