CSS3_html/css_WEB-ITnose での calc() の使用法の簡単な紹介

CSS3 での calc() の使用法を簡単に紹介します:
calc は、calculate の略語です。
calc() の見た目から判断すると、プログラミング言語のメソッドに似ており、計算関数を持っています。
実際、CSS の一部の要素の関連する属性値を動的に計算でき、「+」、「-」、「*」、「/」の単純な四則演算を使用できます。
基本的なルールは次のとおりです:
(1) パーセンテージ、px、em、rem などの単位を使用できます。
(2). さまざまな単位を混合して計算できます。
以下のいくつかのコード スニペットを見てください:

.box{  border:1px solid #ddd;  width:calc(100%-2px)}

上記のコードは、.box 要素の幅と境界線の幅を正確に 100% に合わせて、適応効果を実現します。

すごい

.box の幅を 10em プラス 20px に設定します。
以下は完全なハッシュ等幅の全画面レイアウト効果です:

.box{   width:calc(10em+20px) }

上記のコードはハッシュ等幅レイアウト効果を実装しています。ここでは、calc() を使用して動的計算を実装し、幅の適応を有効にしています。
関連書籍:
(1).calc()、CSS3 での calc() の使用法に関する章を参照してください。
(2).:nth-child() は、CSS 疑似クラス セレクター E:nth-child(n) の章を参照できます。