CSS3中的calc 函式以及在less中的使用

2021-10-08 22:22:26 字數 736 閱讀 6873

css3中我們可以通過calc()函式來動態計算長度值,如:

#div

它的語法是

calc

(expression)

expression引數是必須的,它是乙個數學表示式,結果將採用運算後的返回值。

使用calc() 函式時需要注意的點:

更詳細的介紹見這裡:calc()

瀏覽器的支援情況

如下less定義的兩個變數,並使用cal()函式來計算:

@containerheight

: 500px;

@inputheight

: 50px;

.content

/2 - @

/2 + 10px)";

/* 寫法2 */

top: calc(~"@

/2 - @

/2 + 10px")

;}

這裡需注意

CSS3中 的 calc 函式

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

CSS3中的 calc 計算函式

calc 函式用於動態計算長度值 clac 巢狀 calc 函式可以巢狀。在函式裡邊,會被視為簡單的括號表示式,如下例所示。foo 函式的計算值如下所示 foo 例項 1.我們可以創造乙個表示式,用乙個百分比減掉乙個畫素值 foo 本例中,foo 元素總是小於它父元素寬度 50px。2.使用 cal...

css3 中的calc用法

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