CSS3中 的 calc 函式

2021-10-12 05:56:18 字數 674 閱讀 9167

css3 的 calc()函式。這裡的意思是設定寬度比100%的寬度少30px。

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

calc()函式支援 "+", "-", "*", "/" 運算;

calc()函式使用標準的數**算優先順序規則; 

在less中使用以下樣式寬度計算錯誤: 

width: calc(100% - 30px);
計算出來是:width: 70%;  

分析 :   px也被解析成%進行了運算,這個的原因是calc屬性在less下解析時會忽略運算的單位,統一使用第乙個數值的單位(注意:很多文章上寫的是按照百分比處理,這個說法是不正確的, 例如將100%換為100em,最終的結果是21em)

解決方法:

1、width: calc(~"100% - 30px");

"~"是less語法中的轉義字元,允許你使用任意字串作為屬性或變數值。所以不會進行計算,將最終的計算交給了calc

2、width: e("calc(100% - 30px)");

"e"是乙個方法,也是less中提供的。功能其實也是轉義,接收乙個字串,返回乙個不經任何處理的字串,也是將最終的計算交給了calc

參考文章:

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 瀏覽器支...

css3中的calc的使用

最近在布局的時候遇到乙個問題,在頁面中的左側是側邊欄,右邊是內容區域,內容區域中有乙個固定定位的標籤頁,在設定固定定位的標籤設定寬度的時候應該是內容區域的寬度,而固定定位的時候相對於是視窗的寬度,所以轉換為了當前視窗的寬度減去左側的側邊欄的寬度 開始在網上查了查有個calc屬性是可以寫表示式的,但是...