CSS3中的 calc()計算函數

calc() 函數用於動態計算長度值

• 需要注意的是，運算符前後都需要保留一個空格，例如：width: calc(100% - 10px)；
• 任何長度值單位都可以使用calc()函數進行計算；
• calc()函數支持 “+”, “-”, “*”, “/” 運算；
• calc()函數使用標準的數學運算優先級規則；

clac() 嵌套

calc() 函數可以嵌套。在函數裏邊，會被視爲簡單的括號表達式，如下例所示。

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

函數的計算值如下所示：

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

實例：

1. 我們可以創造一個表達式，用一個百分比減掉一個像素值

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

本例中，.foo 元素總是小於它父元素寬度 50px。

2. 使用 calc() 給我們提供另一個垂直居中元素的解決方案。如果我們知道元素的尺寸，一個典型的解決方案是使用負外邊距移動自身距離高與寬的一半，如下所示：

// Assuming .foo is 300px height and 300px width
.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}

使用 calc() 函數，我們僅僅通過 top 與 left 屬性便能實現相同的效果：

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

3. calc()使計算更加清晰。如果你使一組項目爲它們父元素容器寬度的 1/6，你可能值麼寫：

.foo {
    width: 16.666666667%;
}

然而，它能夠更加清晰並具有可讀性：

.foo {
    width: calc(100% / 6);
}

參考鏈接：CSS3 calc()是怎麼實現計算