ホームページ > 記事 > ウェブフロントエンド > 計算の使い方は？ css3 calc() 関数の使用法の概要

計算の使い方は？ css3 calc() 関数の使用法の概要

青灯夜游オリジナル: 2018-11-01 13:34:3127845ブラウズ

計算とはどういう意味ですか?使い方？この記事の内容は、css3のcalc()関数とは何か、何に使われるのか、その使い方を紹介するものです。困っている友人は参考にしていただければ幸いです。

css3 の calc() とは何ですか?何ができるでしょうか？

calc() 文字通り、関数として理解できます。実際、calc は英語の「calculate」の略語で、要素の長さを指定し、長さの値を動的に計算するために使用できる CSS3 の新機能です。 (推奨される学習: CSS3 マニュアル )

CSS3 の calc() 関数を使用すると、属性値に対して数学的演算を実行できます。

たとえば、要素の幅値を静的なピクセル値として宣言する代わりに、calc() 関数を使用して、幅値が 2 つ以上の値を加算した結果であることを指定できます。

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

なぜ calc() を使用するのでしょうか?

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

.demo{
    width: 100px + 50px;
}

// 使用SASS变量
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

ただし、calc() 関数は、次のような優れたソリューションを提供します。には2つの利点があります。まず、さまざまなユニットを組み合わせることができます。具体的には、パーセンテージ、px、em、rem などのさまざまな単位を組み合わせて計算できます。また、他の単位を組み合わせて計算することもできます。たとえば、パーセント値からピクセル値を減算する式を作成できます。

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

この例では、.demo 要素の幅は常に親の幅の 100% 未満です。

2 番目に、calc() を使用した後、計算される値は式の結果値ではなく、式そのものになります。このように、CSS プリプロセッサを使用して数式を実行する場合、ブラウザに与えられる値は式の結果値になります。

// 在SCSS中指定值
.demo {
    width: 100px + 50px;
}
// 浏览器中编译的CSS及其计算值
.demo {
    width: 150px;
}

calc() 関数を使用すると、ブラウザによって解析された値が実際の calc() 式になります。

// 在CSS中指定值
.demo {
    width: calc(100% - 50px);
}
//浏览器的计算值
.demo {
    width: calc(100% - 50px);
}

これは、ブラウザ内の値がより動的になり、ビューの変化に応じて変化する可能性があることを意味します。ビューの変化に応じて変化する要素 (値: ビューの高さから絶対値を引いたもの) を持たせることができます。

<span style="font-size: 20px;"><strong>calc()</strong></span>関数の使用法

calc( ) 関数は、数値属性値を使用して、加算、減算、乗算、除算の四則演算を実行できます。具体的には、、、、、、などのデータ型で使用できます。

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

.demo {
    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);
}

注:

「」と「-」を使用する場合は、「widht: calc」のように前後にスペースが必要です。 (12% 5em)" このスペースを入れない書き方は間違っています;

「*」と「/」を使用する場合、前後にスペースを入れることはできませんが、スペースを残すことをお勧めします。

calc() ネストされた使用

calc() 関数はネストして使用できます。ただし、内部関数は単純な括弧式として扱われます。たとえば、次のネストされた式:

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

は次と同等です:

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

calc() 関数の使用方法を確認する簡単な例を見てみましょう

例 : Centered要素 (.demo ボックスの高さと幅が両方とも 300 ピクセルであると仮定します)

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

これは次と同等です:

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

calc() 関数の互換性

計算の使い方は？ css3 calc() 関数の使用法の概要

ブラウザによる calc() 関数のサポートは非常に優れていることがわかります。

これをサポートしていないブラウザの場合、calc() 関数は式全体を無視します。これは、静的な値をサポートしていないブラウザで使用できるように、静的な値を提供する必要があることを意味します。

.demo{
width: 90%; /*非支持浏览器设置静态值*/
width: calc(100% - 50px);
}

要約: calc() 関数はさまざまな場面で非常に便利です。実際に試してみて、皆さんの学習に役立てていただければ幸いです。

計算の使い方は？ css3 calc() 関数の使用法の概要

関連記事