巧用css3的calc()屬性進行響應式佈局
今天瀏覽這個http://www.sitepoint.com站時,因為好奇看了下人家寫的程式碼,結果發現了這行程式碼,
於是就研究了一下,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()語法非常簡單,就像我們小時候學加 (+)、減(-)、乘(*)、除(/)一樣,使用數學表示式來表示:
其中”expression”是一個表示式,用來計算長度的表示式。
calc()的運算規則
calc()使用通用的數學運算規則,但是也提供更智慧的功能:
- 使用“+”、“-”、“*” 和 “/”四則運算;
- 可以使用百分比、px、em、rem等單位;
- 可以混合使用各種單位進行計算;
- 表示式中有“+”和“-”時,其前後必須要有空格,如”widht: calc(12%+5em)”這種沒有空格的寫法是錯誤的;
- 表示式中有“*”和“/”時,其前後可以沒有空格,但建議留有空格。
瀏覽器的相容性
我們來個例子,我們做一個三列並排的模組,寬度按百分比、有padding值、有border值、還有margin-right,而且這三個值是px,
效果圖:
它是不會好好並列的,在這種情況下就不好算了,就算算出來也有那麼一點誤差,不是嗎?現在我們就用到了calc(),
意思是(width-(padding+border)*2-margin)
現在可以並排了
好了,到這就告一段絡了,再稍微優化一下左右邊15px的空距,讓兩邊都挨邊。就在父級上加個margin-right:-15px,OK 搞定,
現在拿這個去做響應模式應該很方便了,