CSS calc() の数式に関する詳細な理解

数式 calc() は CSS の関数であり、主に数学演算に使用されます。 calc() を使用すると、ページ要素のレイアウトに便利さと新しいアイデアがもたらされます。この記事ではcalc()の関連コンテンツを紹介します

意味

数式calc()はcalculateの略語で、+、-、*、/の4つの演算子を使用でき、計算には%、px、em、remなどの単位を混在させることができます。

互換性: IE8-、safari5.1-、ios5.1-、android4.3- はサポートされていません。android4.4-4.4.4 は加算と減算のみをサポートします。 IE9はbackround-positionをサポートしていません

注意: + 演算子と - 演算子の周囲にはスペースが必要です。

<スタイル>
.test1{
    border: calc( 1px + 1px ) 黒一色;
    /* calc の演算は * と / の順序に従い、+ と - よりも優先されます*/
    幅: calc(100%/3 - 2*1em - 2*1px);
    背景色: ピンク;
    フォントスタイル: 切り替え(斜体、通常); 
}
.test2{
    /* + 演算子の左側と右側にスペースがないので無効です */
    border: calc(1px+1px) 黒一色;
    /* 0未満にならない属性値については、計算結果が0未満になった場合は0として扱います*/
    幅: calc(10px - 20px);
    左パディング: 10px;
    背景色: 水色;
}
</スタイル>
<div class="test1">テストテキスト 1</div>    
<div class="test2">テストテキスト 2</div>

応用

数式calc()は、レイアウト内の異なる単位でのデジタル演算によく使用されます。

<スタイル>
p{マージン: 0;}
.parent{オーバーフロー: 非表示;ズーム: 1;}
.left{float: left;width: 100px;margin-right: 20px;}    
.right{float: left;width: calc(100% - 120px);}
</スタイル>
<div class="parent" style="background-color: lightgrey;">
    <div class="left" style="background-color: lightblue;">
        <p>左</p>
    </div>
    <div class="right" style="background-color: lightgreen;">
        <p>正しい</p>
        <p>正しい</p>
    </div>
</div>

要約する

上記は、CSS の数式 calc() の紹介です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残していただければ、すぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!

<<: vmware16 仮想マシンに共有フォルダを設定する方法

>>: HTML で div を非表示にするテーブルを非表示にする TABLE または DIV コンテンツの CSS スタイル