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

青灯夜游
リリース: 2020-09-05 10:21:31
オリジナル
27846 人が閲覧しました

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

計算の使い方は? 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() 関数はさまざまな場面で非常に便利です。実際に試してみて、皆さんの学習に役立てていただければ幸いです。

関連する推奨事項:

1. PHP 中国語 Web サイトのビデオ チュートリアル: CSS3 チュートリアル

2. PHP 中国語 Web サイトの特殊効果のダウンロード: css3 特殊効果コード

#

以上が計算の使い方は? css3 calc() 関数の使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート