ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。