css3的calc計算寬高函式用法

2021-09-27 12:03:34 字數 909 閱讀 1774

calc是英文單詞calculate(計算)的縮寫,是css3的乙個新增的功能,可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。

calc()能給元素的做計算,可以給乙個div元素,使用百分比、em、px和rem單位值計算出其寬度或者高度,比如說:width:calc(50% + 2em)

.elm 

1 使用「+」、「-」、「*」 和 「/」四則運算;

2 可以使用百分比、px、em、rem等單位;

3 可以混合使用各種單位進行計算;

4 表示式中有「+」和「-」時,其前後必須要有空格,如"widht:calc(12%+5em)"這種沒有空格的寫法是錯誤的;

5 表示式中有「*」和「/」時,其前後可以沒有空格,但建議留有空格。

注:使用時,注意檢視瀏覽器相容性

瀏覽器相容性

每個格仔width隨著瀏覽器的放大縮小而改變

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1"

/>

>

calctitle

>

CSS3中的 calc 計算函式

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

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