使用calc 函式在CSS屬性值時執行計算

2021-10-07 02:23:16 字數 636 閱讀 5178

在現實中,我們經常要動態調整相對整個畫面的整體高度或者寬度

比如:我想設定乙個div高度為整個螢幕的100% 再減去20px固定高度,這種如何實現呢?

我們就可以適合用calc()函式調整了。使用方法

/*實現了寬度為父容器寬度減去固定的20px*/

width

:-webkit-calc

(100% - 20px)

;width

:-moz-calc

(100% - 20px)

;width

:calc

(100% - 20px)

;

calc方法可以使用 加(+)減(-)乘(*)除(/)

備註:『+』 和 - 運算子的兩邊必須要有空白字元。

『*』 和 / 這兩個運算子前後不需要空白字元。

用 0 作除數會使 html 解析器丟擲異常。

涉及自動布局和固定布局的**中的表列、表列組、錶行、錶行組和表單元格的寬度和高度百分比的數學表示式,auto 可視為已指定

calc() 函式支援巢狀,但支援的方式是:把被巢狀的 calc() 函式全當成普通的括號。(譯者注:所以,函式內直接用括號就好了。)

參考文件:mdn web docs:

css3 calc 屬性介紹

calc的英文是calculate的縮寫,中文為計算的意思,是css3的乙個新增的功能,用來只當元素的長度。比如說 你可以用calc 給元素margin padding border font size和width等屬性設定動態值。為什麼說是動態值呢?因為我們是使用數學表示式來得到的值。用法 既然是...

calc屬性使用方法

平時在製作頁面的時候,總會碰到有的元素是100 的寬度。眾所周知,如果元素寬度為100 時,其自身不帶其他盒模型屬性設定還好,要是有別的,那將導致盒子撐破。比如說,有乙個邊框,或者說有margin和padding,這些都會讓你的盒子撐破。我們換句話來說,如果你的元素寬度是100 時,只要你在元素中新...

CSS3中width屬性的calc 使用問題

恭喜博主今天又踩到了乙個坑,繼滾動條問題解決後博主在測試過程中又發現了乙個問題。由於博主的左側選單可以摺疊,博主在摺疊開啟左側選單過程中發現右側主題內容的寬度顯示不正常,上圖說明 初始渲染顯示正常 摺疊選單顯示正常 問題來了,再次開啟發現顯示不正常 博主通過谷歌的開發者工具發現了問題,之前的內容寬度...