CSS3 の新しいプロパティ calc() の詳細な紹介

1. はじめに

Calc()はjavascriptの関数のように見えますが、実際にはCssで長さ(幅または高さ)を計算するために使用でき、自動的に計算することができます。さまざまな画面サイズに応じて値を調整することで、さまざまな画面サイズでのアダプティブ レイアウト表示を簡単に実装できます。プロジェクトでは、常に中央に配置する必要がある要素がよくあります。当然、最初に思い浮かぶのは、 margin: 0 auto; を使用するか、位置決めとマージンを組み合わせた単純な方法を使用することです。 calc を勉強して初めて、CSS3 の新しいことを本当に理解できるようになります。

2. 使い方

calc()のパラメータは計算式であり、この計算式を通じて、幅と値を計算するタスクが異なるサイズのブラウザに投げられ、ページが計算できるようになります。結論として、これらの計算式も、加算 (+)、減算 (-)、乗算 (*)、除算 (/) の非常に単純な演算です。

p{
    width: calc(15px + 15px);//30px
    width: calc(15px - 10px);//5px
    width: calc(15px*2);//30px
    width: calc(15px/3);//5px}

上記の例から、加算(+)減算(-)演算で計算される値と演算子の間にスペースがあり、このスペースは省略できず、乗算(除算 ( / ) 演算中の * ) スペースは省略できます。

calc() の expression は、パーセント、px、em、rem などの単位を使用して計算でき、単位を組み合わせて計算することもできます:

p{
    width: calc(3em + 5px);//53px}

Three, calc() の入れ子

calc( ) は関数であり、その関数はネストをサポートでき、最終結果はさまざまな式で計算できます。

p{
    --widthA: calc(10px + 190px);
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);//50px
}

4. 単純な中央揃え

calc() で幅を計算した後、padding や margin など、中央揃えの表示を実装する方法はたくさんありますが、原理は同じです。

p{
    padding: 0 calc((100% - 1024px)/2);
}

中央のコンテンツの幅が 1024px に固定されていると仮定すると、親の幅またはウィンドウの幅を 100% 取得し、コンテンツの幅を減算すると、必要な幅が残ります。コンテンツの左側と右側に配置し、それらを 2 つの部分 (/2) に分割することで、中央の幅 1024px のコンテンツが常に中央に配置されるようにすることができます。

5. 互換性

calc() の互換性はすでに IE9 以降、FF4.0 以降、Chrome および Safari6 以降でサポートされていますが、依然として異なるブラウザーのプレフィックスを追加する必要があります。 。

りー

以上がCSS3 の新しいプロパティ calc() の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。