CSS3運算 calc()函數是怎么實現計算

CSS3 的 calc() 函數允許我們在屬性值中執行數學計算操作。例如，我們可以使用 calc() 指定一個元素寬的固定像素值為多個數值的和。

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

為什么是 calc()

如果你使用過 CSS預處理器，比如 SASS，以上示例你或許碰到過。

.foo {width: 100px + 50px; }// Or using SASS variables $width-one: 100px; $width-two: 50px; .bar {width: $width-one + $width-two; }

然而，calc() 函數提供了更好的解決方案。首先，我們能夠組合不同的單元。特別是，我們可以混合計算絕對單元（比如百分比與視口單元）與相對單元（比如像素）。例如，我們可以創造一個表達式，用一個百分比減掉一個像素值。

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

本例中，.foo 元素總是小于它父元素寬度 50px。 第二，使用 calc()，計算值是表達式它自己，而非表達式的結果。當使用 CSS 預處理器做數學運算時，給定值為表達式的結果。

// Value specified in SCSS .foo {width: 100px + 50px; }// Compiled CSS and computed value in browser .foo {width: 150px; }

然而，瀏覽器解析的 calc() 的值為真實的 calc() 表達式。

// Value specified in CSS .foo {width: calc(100% - 50px); }// Computed value in browser .foo {width: calc(100% - 50px); }

這意味著瀏覽器中的值可以更加靈活，能夠響應視口的改變。我們能夠給元素設定一個高度為視口的高度減去一個絕對值，它將隨視口的改變進行調節。

使用 calc()

calc() 函數可以用來對數值屬性執行四則運算。比如，& lt;length>，& lt;frequency>，& lt;angle>，& lt;time>，& lt;number> 或者 & lt; integer 數據類型 這里有一些示例：

.foo {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); }

calc() 函數可以用來對數值屬性執行四則運算。比如

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

函數的計算值如下所示：

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

總結

以上是生活随笔為你收集整理的CSS3运算 calc()函数是怎么实现计算的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。