CSS3中的 calc 計算函式

2021-10-06 09:28:02 字數 776 閱讀 9655

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

clac() 巢狀

calc() 函式可以巢狀。在函式裡邊，會被視為簡單的括號表示式，如下例所示。

.foo
函式的計算值如下所示：

.foo
例項：

1. 我們可以創造乙個表示式，用乙個百分比減掉乙個畫素值

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

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

// assuming .foo is 300px height and 300px width


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

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

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

.foo

CSS3中 的 calc 函式

css3 的 calc 函式。這裡的意思是設定寬度比100 的寬度少30px。calc 函式用於動態計算長度值。calc 函式支援 運算 calc 函式使用標準的數 算優先順序規則 在less中使用以下樣式寬度計算錯誤 width calc 100 30px 計算出來是 width 70 分析 px...

css3 中的calc用法

calc 函式用於動態計算長度值。1.需要注意的是，運算子前後都需要保留乙個空格，例如 width calc 100 10px 2.任何長度值都可以使用calc 函式進行計算 3.calc 函式支援 運算 4.calc 函式使用標準的數 算優先順序規則 calc是css3中的計算，ie10 瀏覽器支...

css3的calc計算寬高函式用法

calc是英文單詞calculate 計算 的縮寫，是css3的乙個新增的功能，可以使用calc 給元素的border margin pading font size和width等屬性設定動態值。calc 能給元素的做計算，可以給乙個div元素，使用百分比 em px和rem單位值計算出其寬度或者高...