CSS calc() の用途は何ですか?

css calc() は、長さの値を動的に計算するために使用されます。この関数を使用すると、「.foo { width: calc(100px 50px);}」などの構文を使用して、属性値に対して数学的演算を実行できます。このステートメントは、要素の幅を指定する固定ピクセル値が複数の値の合計であることを示します。

推奨: 「css ビデオ チュートリアル 」

css3 の calc() 関数は、長さの値を動的に計算するために使用されます。 。

calc() 関数を使用すると、属性値に対して数学的演算を実行できます。たとえば、calc() を使用して、要素の幅の固定ピクセル値を複数の値の合計として指定できます。

.foo {  width: calc(100px + 50px);
}

注:

• 演算子の前後にスペースを確保する必要があることに注意してください。例: width: calc(100% - 10px) ;

• calc() 関数を使用すると、任意の長さの値を計算できます;

• calc() 関数は、" "、"-" をサポートします。 、「*」、「/」演算;

• calc() 関数は標準の数学演算の優先順位ルールを使用します;

理由is calc()

SASS などの CSS プリプロセッサを使用したことがある場合は、上記の例に遭遇したことがあるかもしれません

.foo {
    width: 100px + 50px;
}
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

ただし、calc() 関数はより良い解決策を提供します。まず、さまざまなユニットを組み合わせることができます。特に、絶対単位 (パーセンテージやビューポート単位など) と相対単位 (ピクセルなど) を使用した計算を混合できます。たとえば、パーセンテージからピクセル値を減算する式を作成できます。

.foo {    width: calc(100% - 50px);
}

この例では、.foo 要素は常に親要素の幅より 50 ピクセル小さくなります。

2 番目に、calc() を使用すると、計算された値は式の結果ではなく、式そのものになります。 CSS プリプロセッサを使用して数学的演算を行う場合、指定された値は式の結果になります。

.foo {    width: 100px + 50px;
}.foo {    width: 150px;
}

ただし、ブラウザによって解析された calc() の値は、実際の calc() 式です。

.foo {    width: calc(100% - 50px);
}.foo {    width: calc(100% - 50px);
}

これは、ブラウザ内の値がより柔軟になり、ビューポート内の変更に応答できることを意味します。ビューポートの高さから絶対値を引いた要素の高さを設定でき、ビューポートの変更に応じて調整されます。

calc() の使用

calc() 関数を使用すると、数値属性に対して四則演算を実行できます。たとえば、、、、、、または データ型です。

ここにいくつかの例があります:

.foo {    width: calc(50vmax + 3rem);    padding: calc(1vw + 1em);    transform: rotate( calc(1turn + 28deg) );    background: hsl(100, calc(3 * 20%), 40%);    font-size: calc(50vw / 3);
}

clac() のネスト

calc() 関数はネストできます。次の例に示すように、関数内では単純な括弧式として扱われます。

.foo {    width: calc( 100% / calc(100px * 2) );
}

関数の計算値は次のとおりです。

.foo {    width: calc( 100% / (100px * 2) );
}

ダウングレード スキーム

clac() が一般的にサポートされました。

calc() をサポートしていないブラウザの場合、属性値式全体が無視されます。ただし、calc() をサポートしていないブラウザのフォールバック ソリューションとして固定値を使用できます。

.foo {    width: 90%; 
    width: calc(100% - 50px);
}

vi design http://www.maiqicn.com Office リソース Web サイト コレクション https://www.wode007.com

calc() を使用できるシナリオ

例 1 - 要素を中央に配置

calc() を使用すると、要素を垂直方向に中央に配置するための別の解決策が得られます。要素の寸法がわかっている場合、一般的な解決策は、以下に示すように、負のマージンを使用して高さと幅の半分を移動することです。

.foo {    position: absolute
    top: 50%;    left: 50%;    marging-top: -150px;    margin-left: -150px;
}

calc() 関数を使用して、上部と幅を渡すだけです。 left 属性 同じ効果を達成できます。

.foo {    position: absolute
    top: calc(50% - 150px);    left: calc(50% - 150px);
}

Flexbox を使用すると、このメソッドが必要になることはほとんどありません。ただし、状況によっては Flexbox を使用できない場合があります。たとえば、この方法は、要素を絶対的に配置する必要がある場合、または固定的に配置する必要がある場合に便利です。

例 2 - ルート グリッドの寸法の作成

rem を使用すると、calc() 関数を使用してビューポート ベースのグリッドを作成できます。ルート要素のフォント サイズをビューポート幅の一部に設定できます。

html {  
    font-size: calc(100vw / 30);
}

さて、1rem はビューポート幅の 1/30 です。ページ上のテキストは、ビューポートに基づいて自動的に拡大縮小されます。さらに、同じ比率のビューポートには、ビューポートの実際の寸法に関係なく、常に同じ量のテキストが表示されます。

rem を使用して非テキストのサイズを設定すると、非テキストもこの動作に従います。 1rem-width 要素は常にビューポート要素の幅の 1/30 です。

例 3 - 明確さ

最後に、calc() により計算がより明確になります。項目のグループを親要素のコンテナの幅の 1/6 にすると、次のように記述できます:

.foo {    width: 16.666666667%;
}

ただし、より明確で読みやすくなります:

.foo {    width: calc(100% / 6);
}

Use calc ()では、グリッド システムの作成など、さらに多くのことを行うことができます。これは CSS の最も便利な新機能の 1 つです。

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