巧用CSS3的calc 寬度計算做響應模式布局

2022-09-12 14:42:32 字數 1481 閱讀 6120

今天瀏覽這個站時,因為好奇看了下人家寫的**,結果發現了這行**,

於是就研究了一下,calc()從字面我們可以把他理解為乙個函式function。其實calc是英文單詞calculate(計算)的縮寫,是

css3的乙個新增的功能,用來指定元素的長度。比如說,你可以使用calc()給元素的border、margin、pading、font-size

和width等屬性設定動態值。為何說是動態值呢?因為我們使用的表示式來得到的值。不過calc()最大的好處就是用在流體布局上,可以通過

calc()計算得到元素的寬度。

calc()能做什麼?

calc()能讓你給元素的做計算,你可以給乙個div元素,使用百分比、em、px和rem單位值計算出其寬度或者高度,比如說「width:calc(50% + 2em)」,這樣一來你就不用考慮元素div的寬度值到底是多少,而把這個煩人的任務交由瀏覽器去計算。

calc()語法

calc()語法非常簡單,就像我們小時候學加 (+)、減(-)、乘(*)、除(/)一樣,使用數學表示式來表示:

width:calc(expression);

其中」expression」是乙個表示式,用來計算長度的表示式。

calc()的運算規則

calc()使用通用的數**算規則,但是也提供更智慧型的功能:

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

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

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

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

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

瀏覽器的相容性

我們來個例子,我們做乙個三列併排的模組,寬度按百分比、有padding值、有border值、還有margin-right,而且這三個值是px,

li

效果圖:

它是不會好好並列的,在這種情況下就不好算了,就算算出來也有那麼一點誤差,不是嗎?現在我們就用到了calc(),

li

意思是(width-(padding+border)*2-margin)

現在可以併排了

好了,到這就告一段絡了,再稍微優化一下左右邊15px的空距,讓兩邊都挨邊。就在父級上加個margin-right:-15px,ok 搞定,

現在拿這個去做響應模式應該很方便了,

還有一篇外國人寫的具體如何做大家有興趣的可以了解一下

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 函式

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