「calc()」の利点

pxや、%, em, rem, vw, vhなどの相対単位を使っても、
異なる単位間で計算することができる「calc()」での使用法です。

「calc()」は2つの利点があります。
1.異なる単位で計算することが可能です。例えば、相対単位（vw, vhや%）,
絶対単位（px）を組み合わせることができます。
2.ブラウザでの値が動的になり、ビューポートの変更に合わせて適応できます。

.exsample{
    width: calc(100% - 10px);
}

.exsample{

width: calc(100% - 10px);

}

calc()」の実装例: 要素のセンタリング

要素をボックス内で上下左右、中央にセンタリングすることができます。

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

.exsample {

position: absolute

top: calc(50% - 100px);

left: calc(50% - 100px);

}

上記の例では縦、横ともに100pxのボックスの場合上下中央の配置となります。

CSSコメントアウトの重要性

minmax()